表格自动增加删除行

在页面中实现根据用户需要增加删除数据行：点击增加按钮，表格自动增加一行，且新增加的行与表格中最后一行一模一样。

---

<table id="tb" border="1" cellpadding="0" cellspacing="0">
   <thead bgcolor="#DFDFDF"><td>选择</td><td>输入框</td><td>按钮</td><td>复选框</td><td>单选按钮</td><td>下拉框</td><td>文本区域</td></thead>
   <tr>
           <td><input type="checkbox" /></td>
           <td><input type="text"/></td>
           <td><input type="button" value="我是按钮"/></td>
           <td><input type="checkbox"/></td>
           <td><input type="radio"  />我是radio</td>
           <td><select><option value="010">北京</option></select></td>
           <td><textarea></textarea></td>
</tr>
</table>
<input type="button" onclick="addRow(document.all.tb);" value="增加一行"/>
<input type="button" onclick="deleteRow(document.all.tb);" value="删除一行"/>
<input type="button" onclick="deleteRows(document.all.tb);" value="删除选中行"/>
<script>
// 给表格增加一行，且与最后一行相同
function addRow(table)
{
   // 获取表格中的最后一行对象TR
   var sampleRow = table.rows[table.rows.length - 1];
   // 获取表格中的最后一行对象TR中的所有TD对象集合，注意，获取的是一个含有多个TD对象的数组集合
   var sampleCell = sampleRow.getElementsByTagName("td");
   // 获取当前表格中的行数序号，为了给每行的每个TD中的对象命名
   var row = table.rows.length;
   // 新创建一个TR对象，也是将要增加到表格中的新行
   var newRow = document.createElement("tr");
   // 根据表格中最后一行sampleRow对象TR中的TD对象集合sampleCell，创建新行newRow中的TD对象集合newCell

   // 遍历表格中的最后一行中TD对象集合，用来复制新增加的行中的每一个新的TD对象
   for(i = 0; i < sampleCell.length; i ++ )
   {
      // 创建一个新的TD对象
      var newCell = document.createElement("td");
      // 将最后一行中第i列的TD对象的内码赋给新行中第i列的新TD对象中
      newCell.innerHTML = sampleCell[i].innerHTML;
      // 给新行中第i列TD对象中的对象赋名
      newCell.childNodes.item(0).name = "cell" + row + i;
      // 在新增加的行中追加一个新的TD子对象
      newRow.appendChild(newCell);
   }
   // 将新行增加到表格最后一行的父对象中，TR的父对象是TBODY，很多时候会被遗忘的......
   sampleRow.parentNode.appendChild(newRow);
}
// 删除表格中的最后一行
function deleteRow(table)
{
   if(table.rows.length == 2)
   window.alert("不允许删除最后一行数据！");
   else
   table.deleteRow(table.rows.length - 1);
}
// 删除表格中第一列选中的行
function deleteRows(table)
{
   var i = table.rows.length - 1;

   // 遍历表格中的所有行
   while(i >= 1)
   {
      // 如果表格第1列中的选择框选中的话，就将该行删除

      // 获取到表格的第i行 ：                            table.rows[i]

      // 获取第i行的第1个TD对象：                        table.rows[i].childNodes.item(0)

      // 获取第i行的第1个TD对象中的第一个对象：           table.rows[i].childNodes.item(0).childNodes.item(0)

      // 获取第i行的第1个TD对象中的第一个对象的checked值：table.rows[i].childNodes.item(0).childNodes.item(0).checked
      if(table.rows[i].childNodes.item(0).childNodes.item(0).checked == true)
      {
         if(i == 1)
         window.alert("不允许删除最后一行数据！");
         else
         table.deleteRow(i);
      }
      i = i - 1;
   }
}
</script>