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>