javascript - How to clear the data only from table cells with Jquery? - Stack Overflow

admin管理员组

文章数量:1317909

I have a predefined empty table. In my Ajax call I fill it with the required data. When the users tries to query for new information, I need to clear the data from the cells but leave the rows and cells structure.

for example .remove() and empty() does not work for me as it remove all rows.

I tried $("#tblManifest tbody tr td").innerHTML="" but that did not work. I only need to clear the cell's data from the tbody.

I have a predefined empty table. In my Ajax call I fill it with the required data. When the users tries to query for new information, I need to clear the data from the cells but leave the rows and cells structure.

for example .remove() and empty() does not work for me as it remove all rows.

I tried $("#tblManifest tbody tr td").innerHTML="" but that did not work. I only need to clear the cell's data from the tbody.

• javascript
• jquery

Share Improve this question Follow asked Nov 7, 2016 at 2:53 causitacausita 1,70811 gold badge2323 silver badges3535 bronze badges 2

• .empty should work with that selector - perhaps you're doing something wrong in the code you're not showing – Jaromanda X Commented Nov 7, 2016 at 2:55
• 1 Below answers are correct. But I am menting here just to update you. You were on right path but you are missing a small portion. The line should be $("tblManifest tbody tr td")[0].innerHtml="". The J-Query selector returns array of objects not single object. – Pratik Gaikwad Commented Nov 7, 2016 at 3:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You need to really read the manual. The below code will work:

$("#tblManifest tbody tr td").html("");        // Or
$("#tblManifest tbody tr td").html(" ");  // Add a non-breaking space. (Remended)
$("#tblManifest tbody tr td").empty();         // This

Can this be a possible solution

<table id="tblManifest">
<thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jai</td>
      <td>71</td>
    </tr>
    <tr>
      <td>Veeru</td>
      <td>72</td>
    </tr>
  </tbody>
</table>
<div id="btnContainer">
  <Button id='btn'>Click me for empty</Button>
</div>

    $('#btn').on('click',function(e){
    var tbl = $("table#tblManifest > tbody > tr");
  $(tbl).each(function(index,value){
    $(value).find('td').empty()
  })
})

I am just looping through table elment and empty them.

Jsfiddle is here

Did you try:

$("#tblManifest tbody tr td").html("");

Or

$("#tblManifest tbody tr td").html(" ");

?

I tried $("#tblManifest tbody tr td").innerHTML="" but that did not work.

$("#tblManifest tbody tr td") gives jQuery object and not dom directly, so innerHTML is not property to work on.

As others have already posted a solution but still this is what you can give a try:

$("#tblManifest tbody td").text('');

To keep the table structure intact (which easier on the eyes), the easiest way I found was to change change the font color to match the background, then change it back after the new data is loaded:

var nextStr="-- bar --";
function getNewData(){
  $('#dataCell').css('color', 'white');
  setTimeout(function(){
    var str=$('#dataCell').html();
    $('#dataCell').html(nextStr);
    nextStr=str;
    $('#dataCell').css('color', 'black');
  },500);  
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dataTable" border="1"><tbody><tr><td>data:</td><td id="dataCell" width="90px" align="center">** foo **</td></tr></tbody></table>
<br/><button onclick="getNewData()">load data</button>

本文标签： javascriptHow to clear the data only from table cells with JqueryStack Overflow