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