在JavaScript中使用DOM技术动态控制表格

 相对于IE提供的对表格的insertCell、insertRow等方法，使用DOM显得可移植更好一些

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

<html>
<head>
<title> Test Page </title>
<script type="text/javascript" src="prototype.js"></script>
</head>

<body>
<table border="1" width="500">
<tbody id="tb1">
    <tr id="tr1">
        <td width="50%">1</td>
        <td widht="50%">&nbsp;</td>
    </tr>
    <tr id="tr2">
        <td bgcolor="red">2</td>
        <td>&nbsp;</td>
    </tr>
    <tr id="tr3">
        <td>3</td>
        <td>&nbsp;</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 = "&nbsp;";
  new_td2.style.backgroundColor = "red";    //设定背景色为红色
  new1.appendChild(new_td2);
  tb.appendChild(new1);    
}
</script>
</body>
</html>