2022/1/11,增加删除记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
//删除tr的响应函数
function delA() {
//获取当前tr
var tr = this.parentNode.parentNode;
//获取要删除员工的名字
var name = tr.children[0].innerHTML;
/*
*confirm();
* 取消和确认两个按钮的提示框
* 确认返回true,取消返回false
*
*
*/
var flag = confirm("确认删除" + name + "吗?");
if (flag) {
tr.parentNode.removeChild(tr);
}
return false;
}
//获取所有超链接
var allA = document.getElementsByTagName("a");
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = delA
}
//绑定按钮事件
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function () {
//获取员工信息
//获取name,email,salary
var name = document.getElementById("empName").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
/*
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
将获取到的东西保存在tr中
*/
//创建一个tr
var tr = document.createElement("tr");
//新方法
//设置tr中的内容
tr.innerHTML = "<td>" + name + "</td>" + "<td>" + email + "</td>" + "<td>" + salary + "</td>" + "<td>" + "<a href='javascript:;'>delete</a>" + "</td>";
//获取刚刚添加的a,并且绑定单击响应函数
var a = tr.getElementsByTagName("a")[0];
a.onclick = delA;
// //创建四个td
// var nameTD = document.createElement("td");
// var emailTD = document.createElement("td");
// var salaryTD = document.createElement("td");
// var aTD = document.createElement("td");
// //创建一个a超链接
// var a = document.createElement("a");
// //向a中添加href属性
// a.href = "javascript:;";
// //为新添加的a再绑定一次单机响应函数
// a.onclick = delA;
// //创建文本节点
// var nameText = document.createTextNode(name);
// var emailText = document.createTextNode(email);
// var salaryText = document.createTextNode(salary);
// var delText = document.createTextNode("delete");
// //将文本添加到td中
// nameTD.appendChild(nameText);
// emailTD.appendChild(emailText);
// salaryTD.appendChild(salaryText);
// //向a中添加文本
// a.appendChild(delText);
// aTD.appendChild(a);
// //将tr添加到td
// tr.appendChild(nameTD);
// tr.appendChild(emailTD);
// tr.appendChild(salaryTD);
// tr.appendChild(aTD);
//获取table
var tab = document.getElementById("employeeTable");
//获取内存的tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table align="center" id="employeeTable" border="2">
<tr>
<th>Name</th>
<th>email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>123456@qq.com</td>
<td>100</td>
<td><a href="001">delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>12356@qq.com</td>
<td>1000</td>
<td><a href="#">delete</a></td>
</tr>
<tr>
<td>Hom</td>
<td>12456@qq.com</td>
<td>10000</td>
<td><a href="#">delete</a></td>
</tr>
</table>
<div id="formDiv" align="center">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>