[轉載] 在JavaScript中使用DOM技术动态控制表格

轉載於： [url]http://blog.csdn.net/lldwolf/archive/2008/03/31/2234372.aspx[/url]

下面的例子中，是一个3*2的表格，按下按钮后，删除第二行，然后再插入一个新行，该代码在IE6和FF下测试通过。

<table border="1" width="500">
<tbody id="tb1">
    <tr id="tr1">
        <td width="50%">1</td>
        <td widht="50%"> </td>
    </tr>
    <tr id="tr2">
        <td bgcolor="red">2</td>
        <td> </td>
    </tr>
    <tr id="tr3">
        <td>3</td>
        <td> </td>
    </tr>
<tbody>
</table>
<form name="form1">
<input type="button" value="test" onclick="test()" />
</form>
<script type="text/javascript">... 

function test()
...{
  var frm = document.form1;
  var tb = document.getElementById("tb1");    //获取表格对象
  var trs = tb.getElementsByTagName("tr");        //获取所有的<tr>
  var del_tr = trs[1];        //设定删除第2行
  var tr = tb.removeChild(del_tr);    //删除第2行
  var new1 = document.createElement("tr");    //新建一行
  tb.appendChild(new1);
  var new_td1 = document.createElement("td");    //在新建行中添加单元格
  new_td1.style.color = "blue";        //新建行的第1个单元格字体设为蓝色
  new_td1.setAttribute("align", "center");    //新建行的第1个单元格的对齐方式设为居中
  new_td1.innerHTML = "aa";        //新建行第1个单元格内容
  new1.appendChild(new_td1);
  var new_td2 = document.createElement("td");    //添加第2个单元格
  new_td2.innerHTML = " ";
  new_td2.style.backgroundColor = "red";    //设定背景色为红色
  new1.appendChild(new_td2);
  tb.appendChild(new1);    
}
</script>