HTML Table content insert and clear using javascript

Question

I have a table and assigned a id to it. Initially there is no content.ie, just the table tag.

I am using this to clear the table contents

function emptyTable ( tableRef )
{
    var resultCount = tableRef.rows.length;
    for ( var i=0; i<resultCount; i++)
    {
        if ( tableRef.rows[tableRef.rows.length-1].cells[0].tagName == "TD" )
        {
            tableRef.deleteRow(tableRef.rows.length-1);
        }
    }
}

tableRef will have the table id. For first time i have clear the table and the rows are inserted.

var resultListRef = document.getElementById("showReferencesDet");

var row = resultListRef.insertRow(0);
var newCell  = row.insertCell(0);
newCell.innerHTML = 'Select';
var newCell2  = row.insertCell(1);
newCell2.innerHTML = 'Reference Number';

var row = resultListRef.insertRow(resultListRef.rows.length);
var newCell  = row.insertCell(0);
name="referenceId" value="' + id + '" />';
newCell.innerHTML = '<input type="checkbox" id="referenceId" name="referenceId" value="' + allVars + '" />';

var newCell2  = row.insertCell(1);
newCell2.innerHTML = RefNo;

It works for the first time but didn't works in the 2nd time.

Please help to solve it.

Answer 1

just change your for loop

  function emptyTable ( tableRef )
    {
        document.getElementById(tableRef).innerHTML='';
    }

Answer 2

Instead of:

var row = resultListRef.insertRow(resultListRef.rows.length);

you can do:

var row = resultListRef.insertRow(-1);

and the row will be inserted as the last row.

Removing the rows of a table doesn't necessarily remove all content, it may still contain empty text nodes, thead and tfoot elements, etc. Consider:

function emptyTable ( tableRef ) {
  while (tableRef.firstChild) {
    tableRef.removeChild(tableRef.firstChild);
  }
}

That will clear everything from inside the table (but not properties and attributes of the table itself) as if you had <table ... ></table> .

However, you may want to keep header rows and footers. In that case, you just want to remove the tBody elements:

function emptyTableBodies ( tableRef ) {
  var tBodies = tableRef.tBodies;
  for (var i=tBodies.length; i;) {
    tableRef.removeChild(tBodies[--i]);
  }
}

so you can do:

<table id="t0">
  <thead>
    <tr><th>head
  </thead>
  <tr><td>0
  <tr><td>0
  <tr><td>0
  <tr><td>0
</table>

<button onclick="emptyTableBodies(document.getElementById('t0'))">Empty table bodies</button>

Note that a table with no content is not valid, so fix that as soon as you can after the above.