单击删除,可删除对应的一行记录。
单击添加。可把姓名和年龄的对应信息添加到表格中。
编号自增。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
姓名:<input size="11" id="name" />
年龄:<input size="11" id="age" />
<button id="btn1" onclick="add()">添加</button><br>
<table id="emploeeTable" border="1px" width="300px">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th> </th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>20</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
</table>
</body>
<script>
//获取所有超链接
var allA = document.getElementsByTagName("a");
//为每个超链接绑定一个单击响应函数
for(var i = 0; i < allA.length; i++) {
allA[i].onclick = function() {
//获取当前tr
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//var name = tr.getElementsByTagName("td")[1].innerHTML;
var name = tr.children[1].innerHTML;
//删除之前的提示框
var flag = confirm("确认删除" + name + "吗?");
if(flag) {
tr.parentNode.removeChild(tr);
}
};
}
//为添加按钮添加单击响应函数
var i = 3;
function add() {
i++;
var trl = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var a = document.createElement("a");
td1.innerText += i;
td2.innerText = document.getElementById("name").value;
td3.innerText = document.getElementById("age").value;
a.innerText = "删除";
a.onclick = function() {
//获取当前tr
var tr = this.parentNode.parentNode;
//获取要删除的name
var name = tr.getElementsByTagName("td")[1].innerHTML;
//判断是否删除
var flag = confirm("确认删除" + name + "吗?");
if(flag) {
a.parentElement.parentElement.remove();
//tr.parentNode.removeChild(tr);
}
}
//a.appendChild(delValue);
td4.appendChild(a);
trl.appendChild(td1);
trl.appendChild(td2);
trl.appendChild(td3);
trl.appendChild(td4);
a.href = "javascript:;";
//要把tr加到tbody里
var tbody = document.getElementsByTagName("tbody")[0];
tbody.appendChild(trl);
}
</script>
</html>