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