CODEWITHSUNDEEP
javascriptjquery
causita
causita

Reputation: 1708

How to clear the data only from table cells with Jquery?

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.

Upvotes: 2

Views: 8221

Answers (5)

will
will

Reputation: 149

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.com/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>

Upvotes: 0

raju
raju

Reputation: 6936

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

Upvotes: 2

user2575725
user2575725

Reputation:

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('');

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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

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

Upvotes: 3

Michael Nealon
Michael Nealon

Reputation: 76

Did you try:

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

Or

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

?

Upvotes: 0

Related Questions