在AJAX的应用中很经常碰到要动态给表格增加行,这该如何实现呢?
先建一个表如下:
<table border="1">
<tr>
<td>姓名</td>
<td>地址</td>
</tr>
<tbody id="mainbody">
</tbody>
</table>
现在进入实际的操作了.我们先动态地生成一个行
var cell = document.createElement("tr");
接着动态生成两个列和要放入列中的值.
var row1 = document.createElement("td");
var row2 = document.createElement("td");
var text1 = document.createTextNode("zidoing")
var text2 = document.createTextNode("xiamen");
这些都做完以后下面就很简单了。
把值放入列中.
row1.appendChild(text1);
row2.appendChild(text2);
把列放入行中
cell.appendChild(row1);
cell.appendChild(row2);
最后取得tbody，把行放入就可以了。
var mainbody = document.getElementById("mainbody");
mainbody.appendChild(cell);
完整的代码如下：
<html>
<head>
<title>动态增加行</title>
<script type="text/javascript">
function addCell(){
var cell = document.createElement("tr");
var row1 = document.createElement("td");
var row2 = document.createElement("td");
var text1 = document.createTextNode("zidoing")
var text2 = document.createTextNode("xiamen");
row1.appendChild(text1);
row2.appendChild(text2);
cell.appendChild(row1);
cell.appendChild(row2);
var mainbody = document.getElementById("mainbody");
mainbody.appendChild(cell);
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>地址</td>
</tr>
<tbody id="mainbody">
</tbody>
</table>
<input type="button" value="增加行" onclick="addCell()"/>
</body>
</html>