动态增加表格的行

来源:互联网 发布:golang package 编辑:程序博客网 时间:2024/06/13 07:16

双击加号按钮可以增加表格行数

<!doctype html>
<html>
<head>
<style>
table{
border:1px solid red;
}
td{
border:1px solid blue;
}
</style>
<script>
function add(){
var table1=document.getElementById("table1");
var tr1=document.createElement("TR");
tr1.innerHTML="<td>表格第1列</td><td>表格第2列</td>";
//table1.appendChild(tr1);插入到最后一个子节点的后面
table1.insertBefore(tr1,table1.childNodes[0]);//插入到第一个子节点之前
//table1.insertBefore(tr1,table1.firstChild);插入到第一个子节点之前
}
</script>
<meta charset="UTF-8">
</head>
<body>
<table id="table1" cellspacing="1px">
<tr>
<b>测试增加表格的行</b>
</tr>
<tr>
<td>
表格第1列
</td>
<td>
表格第2列
</td>
</tr>
<tr>
<td>
表格第1列
</td>
<td>
表格第2列
</td>
</tr>
</table>
<input type="button" value="+" ondblclick="add()">
</body>
</html>

原创粉丝点击