在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 >