DOM操作动态增加表格

来源：互联网发布：excel大量数据统计编辑：程序博客网时间：2024/06/02 03:53

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作DOM动态增加表格</title>
<script type="text/javascript">
//通过DOM操作动态增加或者删除表格
//注意:在向table元素节点添加tr元素节点之前,必须将tr元素节点添加到tbody元素节点上
//再把tbody节点添加到table节点上
function addrow(){ //增加表格行函数
var tableNode=document.getElementById("mytab"); //取得table节点对象
var id=document.getElementById("id").value; //取得输入的内容
var name=document.getElementById("name").value;
var tbody=document.createElement("tbody");//创建一个tbody元素节点
var tr=document.createElement("tr");//创建一个tr元素节点
var td_id=document.createElement("td");//创建一个td元素节点
var td_name=document.createElement("td");//创建一个td元素节点
td_id.appendChild(document.createTextNode(id));//为td_id元素节点添加文本节点
td_name.appendChild(document.createTextNode(name));//为td_name元素节点添加文本节点
tr.appendChild(td_id);;//为tr元素节点添加子元素节点td_id
tr.appendChild(td_name);//为tr元素节点添加子元素节点td_name
tbody.appendChild(tr);//为tbody元素节点添加子元素节点tr
tableNode.appendChild(tbody);//为table元素节点添加子元素节点tbody
}

</script>
</head>
<body >
新的编号:<input type="text" name="id" id="id">
新的姓名:<input type="text" name="name" id="name">
<input type="button" value="增加" onclick="addrow()">
<table id="mytab" border="1">
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
</table>
</body>
</html>

阅读全文

0 0