本文介绍了一个使用DOM操作HTML表格的示例，演示了如何删除指定行并添加新行，同时设置了新行的样式属性。该示例已在IE6和Firefox中验证可行。
相对于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%"> </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>
</body>
</html>
下面的例子中，是一个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%"> </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></body></html>
扫一扫
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
