使用javascript动态添加和删除table的行和列

使用javascript动态添加和删除table的行和列

第一种方法：使用insertRow添加行，使用insertCell添加单元格，再用innerHTML填充单元格。使用deleteRow删除行，代码如下：
Javascript代码：

function addRow()
  {
     var root = document.getElementById("tbody")
     var allRows = root.getElementsByTagName('tr');
     var allCells = allRows[0].getElementsByTagName('td');
     var newRow = root.insertRow();
     var newCell0 = newRow.insertCell();
     var newCell1 = newRow.insertCell();
     var newCell2 = newRow.insertCell();
     var newCell3 = newRow.insertCell();
     newCell0.innerHTML = allCells[0].innerHTML;
     newCell1.innerHTML = allCells[1].innerHTML;
     newCell2.innerHTML = allCells[2].innerHTML;
     newCell3.innerHTML = allCells[3].innerHTML;

  }
  function removeRow(r)
  {
    var root = r.parentNode;
    root.deleteRow(r);
  }

HTML代码：

<table>
  <tbody id="tbody">
    <tr>
        <td><select><option>hello</option><option>hi</option></select></td>
        <td><input type="text" value="enter you name here" /></td>
        <td><input type="text" value="text2"/></td>
        <td><input type="button" value="remove" onclick="removeRow(this.parentNode.parentNode)"/></td>
    </tr>
    </tbody>
  </table>
  <table><tr><td><input type="button" value="add" onclick="addRow()" /></td></tr></table>

第二种方法：使用cloneNode方法(复制节点)和appendChild(附加子元素)，使用removeChild删除子元素，代码如下：

Javascript代码：

function addRow()
{ 
    var root = document.getElementById("tbody");
    var allRows = root.getElementsByTagName('tr');
    var cRow = allRows[0].cloneNode(true)
    root.appendChild(cRow);
} 
function removeRow(r)
{
    var root = r.parentNode;
    var allRows = root.getElementsByTagName('tr')
    if(allRows.length>1)
        root.removeChild(r);
    else
        alert("only one row left, you not need to remove it.");
}

HTML代码：

<table border="0" cellspacing="0" cellpadding="0"> 
  <tbody id="tbody">
    <tr> 
      <td><input type="text" name="text1" /></td> 
      <td><input type="text" name="text2" /></td> 
      <td><select name="select"> 
        <option>item1</option> 
        <option>item2</option> 
        <option>item3</option> 
        <option>item4</option> 
        <option>item5</option>
      </select></td>
      <td><input type="button" value="Remove" onclick="removeRow(this.parentNode.parentNode)"></td>
    </tr></tbody>
  </table>
  <input name="button" type="button" value="Add row" onclick="addRow(')">

以上代码IE7.0测试通过。其他浏览器未检测。