<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>增加Table行</title>
</head>
<script>
function addRow(obj)
{
//添加一行
var newTr = testTbl.insertRow()
//添加两列
var newTd0 = newTr.insertCell()
var newTd1 = newTr.insertCell()
//设置列内容和属性
newTd1.innerHTML = '<input type=checkbox id="box4">'
newTd0.innerText= '新加行'
}
</script>
<body>
<table id="testTbl" border=1>
<tr id="tr1">
<td ><input type=checkbox id="box1"></td>
<td id="b">第一行</td>
</tr>
<tr id="tr2">
<td ><input type=checkbox id="box2"></td>
<td id="b">第二行</td>
</tr>
<tr id="tr3">
<td ><input type=checkbox id="box3"></td>
<td>第三行</td>
</tr>
</table>
<br />
<input type="button" id="add" onclick="addRow()" value="Add Row" />
</body>
</html>
看看怎么样
insertRow（）函数可以带参数，形式如下： 这个函数将新行添加到index的那一行前，比如insertRow（0），是将新行添加到第一行之前，默认的insertRow（）函数相当于insertRow（－1），将新行添加到表的最后。
<scriptlanguage="JavaScript">
vart＝document．getElementById（＂test＂）；
t.innerHTML="<tr><td>数据</td></tr>"
／／或者
vart＝document．getElementById（＂test＂）；
vartr＝document．createElement（＂tr＂）；
vartd＝doucment．createElement（＂td＂）；
td．innerHTML＝＂数据＂；
tr．appendChild（td）；
t．appendChild（tr）；
｝
</script>
扩展资料：
给table添加一行
1、＄（＂＃addTable＂）．click（function（）｛；
2、vartr="<tr>"+；
3、"<td>11</td>"+；
4、"<td>22</td>"+；
5、"<td>33</td>"+；
6、"<td>44</td>"+；
7、"<td>55</td>"+；
8、"</tr>"
9、＄（＂．layui－table＂）．append（tr）；
正规的添加表格行是 insertrow，添加单元格是 insertcell。而且你 createelement 里面需要是合法的 html 元素标签，例如 tr，td。function
btncreatelemet_click()
{
var
con=document.getelementbyid("lblnewelemet")
var
row
=
con.insertrow(0)
var
cell
=
row.insertcell(0)
cell.innerhtml
=
"aaaaa"
}
下面是使用 createelement 创建 tr 和 td，但这样不标准
function
btncreatelemet_click()
{
var
con
=
document.getelementbyid("lblnewelemet")
var
tr
=
document.createelement("tr")
con.appendchild(tr)
var
td
=
document.createelement("td")
tr.appendchild(td)
td.innerhtml
=
"aaaaa"
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）