您的位置：首页 > Web前端 > JavaScript

表格动态增加行(JS)

2012-07-23 15:46 441 查看

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

javascript动态增加行的错误（问题比较经典）

<html>
<head>
<title>动态添加html元素</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<table><tbody>
<label>问题所属方面：
<select name="select" size="1" id="">
<option value="1">问题一</option>
<option value="2">问题二</option>
</select>
</label>
<label>问题描述1:<textarea name="txt1" cols="80" rows="3"></textarea></label>

<p>
<input type="button" value="添加一个问题" onclick="addCheckDetail(this.form,this.parentNode)" />
<input type="button" value="删除最后一个问题" onclick="removeCheckDetail(this.form)" />
</p>
<p><input type="Submit" value="保存" /></p>
</tbody></table>

</form>
</body>
</html>
我想用javascript动态增加行,当form中没有table标签时是可以增加的,像上面增加了table标签就出现错误了,请问各位该如何解决?

=======================================
解决方案:
由于form.insertBefore是将指定节点添加到form的直接子节点上,由于form中只有一个table,没有afterElement这个直接子节点.所以会报错.
input标签的parentNode即p标签,它的直接父结点是TBODY标签.所以只能用TBodyElement.insertBefore.进行插入.

把
Js代码
form.insertBefore(label2,afterElement);
form.insertBefore(label1,afterElement);

两句改为:
afterElement.parentNode.insertBefore(label2,afterElement);
afterElement.parentNode.insertBefore(label1,afterElement);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

表格动态增加行(JS)

javascript动态增加行的错误 （问题比较经典）

javascript动态增加行的错误（问题比较经典）