add a row to a table in javascript

[sdkramer]

Is there any way I can add a row to a table dynamically with javascript.

I would like to have a button who's onlick event adds an item to a table

I tried generating this table in text and using innerHTML of a div tag and the tds don't work it's like it just puts all the text together. Is there anything I can do?

TIA,

Seth

[aym]

check out this:
http://javascript.internet.com/misce...add-a-row.html

[sdkramer]

I dont' mean to be ungrateful but is there a way to remove a row as well?

[aym]

code for adding, removing and renaming a row, taken from this page:
http://www.experts-exchange.com/Web/..._20781550.html

PHP Code:

function renameRows(tBodyEl)
{  
  var rows = tBodyEl.getElementsByTagName("tr");    
  var row, cell, input, j;
 
  for(var i = 0; i < rows.length; i++)
  {
    j = i + 1;
    row = rows[i];
    cell = row.getElementsByTagName("td")[0];
    input = cell.getElementsByTagName("input")[0];
       
    input.name = "count" + j;    
    input.value = j;
  }
  document.getElementById("textfieldcount").value = rows.length;
}

function addRow()
{
  var table = document.getElementsByTagName("table")[0];
  var tBody = table.getElementsByTagName("tbody")[0];
  var rows = tBody.getElementsByTagName("tr");    
 
  var newRow = tBody.appendChild(rows[0].cloneNode(true));
 
  renameRows(tBody);
}

function removeRow()
{
  var table = document.getElementsByTagName("table")[0];
  var tBody = table.getElementsByTagName("tbody")[0];
  var rows = tBody.getElementsByTagName("tr");  
  var row = rows[0];
 
  if(rows.length > 1)
  {
    tBody.removeChild(row);
    renameRows(tBody);
  }
  else
    alert ("You cannot delete the last remaining row");
}