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

JS-Table动态增加删除行

2017-04-19 10:07 513 查看

HTML

参考资料

http://www.runoob.com/jsref/dom-obj-document.html

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>姓名<input type="text" id="name" />
<input type="button" value="添加" onclick="add()" /><br />
电话<input type="text" id="tel" /></p>
<p>
<table border="1px" id="tb">
<tr>
<td>姓名</td>
<td>电话</td>
<td>action</td>
</tr>
</table>
</p>
</body>

</html>

JS代码块

<script>
function add(){
//获取元素的值
var name = document.getElementById("name").value;
var tel = document.getElementById("tel").value;
//获取table
var tab = document.getElementById("tb");
//              创建元素
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tab.appendChild(tr);
td1.innerHTML = name;
td2.innerHTML = tel;
td3.innerHTML = "<input type='button' value='删除' onclick='del(this)' />"

}
function del(p){
p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement);
}
</script>

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

标签： javascript

相关文章推荐

新的分享

章节导航