轉載於: [url]http://blog.csdn.net/lldwolf/archive/2008/03/31/2234372.aspx[/url]
下面的例子中,是一个3*2的表格,按下按钮后,删除第二行,然后再插入一个新行,该代码在IE6和FF下测试通过。
下面的例子中,是一个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>