前端实现员工信息录入和删除

最新推荐文章于 2021-04-17 09:11:52 发布

无敌代码终结者

最新推荐文章于 2021-04-17 09:11:52 发布

阅读量824

点赞数

文章标签： css javascript html5 html

本文链接：https://blog.csdn.net/weixin_42280470/article/details/107774504

版权

实现功能如图所示：

代码如下可以参考学习：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

th,

td {

border: 1px solid aqua;

}

table {

border-collapse: collapse;

margin: 100px auto;

text-align: center;

}

#addEmpTable {

border-collapse: collapse;

margin: 10px auto;

text-align: center;

}

h4 {

text-align: center;

}

</style>

window.onload = function () {

var AllDelte = document.getElementsByTagName("a");

for (var i = 0; i < AllDelte.length; i++) {

AllDelte[i].onclick = function () {

var tr = this.parentNode.parentNode;

var name = tr.getElementsByTagName("td")[0].innerHTML;

var flag = confirm("确认删除" + name + "吗");

if (flag) {

tr.parentNode.removeChild(tr);

}

return false;

}

var addEmpButton = document.getElementById("addEmpButton");

addEmpButton.onclick = function () {

var empName = document.getElementById("empName").value;

var email = document.getElementById("email").value;

var salary = document.getElementById("salary").value;

var tr = document.createElement("tr");

var nametd = document.createElement("td");

var emaletd = document.createElement("td");

var salarytd = document.createElement("td");

var atd = document.createElement("td");

var a = document.createElement("a");

a.href = "javascript:;"

a.οnclick=function () {

var tr = this.parentNode.parentNode;

var name = tr.getElementsByTagName("td")[0].innerHTML;

var flag = confirm("确认删除" + name + "吗");

if (flag) {

tr.parentNode.removeChild(tr);

}

return false;

}

var nameText = document.createTextNode(empName);

var emailText = document.createTextNode(email);

var salaryText = document.createTextNode(salary);

var delText = document.createTextNode("Delete");

nametd.appendChild(nameText);

emaletd.appendChild(emailText);

salarytd.appendChild(salaryText);

a.appendChild(delText);

atd.appendChild(a);

tr.appendChild(nametd);

tr.appendChild(emaletd);

tr.appendChild(salarytd);

tr.appendChild(atd);

var employeeTable = document.getElementById("employeeTable");

var tbody = document.getElementsByTagName("tbody")[0];

tbody.appendChild(tr);

}

</script>

</head>

<body>

<tr>

<th>Email</th>

<th>Salary</th>

</tr>

<tr>

<td><a href="deleteEmp?id=001">Delete</a></td>

</tr>

<tr>

<td><a href="deleteEmp?id=002">Delete</a></td>

</tr>

<tr>

<td><a href="deleteEmp?id=003">Delete</a></td>

</tr>

</table>

<h4>添加新员工</h4>

<tr>

</td>

</tr>

<tr>

<td class="word"> email:</td>

</td>

</tr>

<tr>

<td class="word"> salary:</td>

</td>

</tr>

<tr>

<button id="addEmpButton" value="abc">submit</button>

</td>

</tr>

</table>

</body>

</html>

无敌代码终结者

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端实现员工信息录入和删除

实现功能如图所示：代码如下可以参考学习：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><s...
复制链接

扫一扫