<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer {
width: 400px;
margin: 100px auto;
text-align: center;
}
table {
width: 400px;
border-collapse: collapse;
margin-bottom: 20px;
}
td,
th {
border: 1px black solid;
padding: 10px 0;
}
form div {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="outer">
<table>
<tbody>
<tr>
<th>姓名</th>
<th>邮件</th>
<th>薪资</th>
<th>操作</th>
</tr>
<tr>
<td>孙悟空</td>
<td>swk@hgs.com</td>
<td>10000</td>
<!-- a链接点击后默认浏览器地址栏会改变（跳转）。如果不想要这种变化，可让href="javascript:;"，表示点击后执行一段JS代码，这里"javascript:;"表示空操作 -->
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>猪八戒</td>
<td>zbj@glz.com</td>
<td>8000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>沙和尚</td>
<td>shs@lsh.com</td>
<td>6000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
<form action="#">
<div>
<label for="name">姓名</label>
<input type="text" id="name" />
</div>
<div>
<label for="email">邮件</label>
<input type="email" id="email" />
</div>
<div>
<label for="salary">薪资</label>
<input type="number" id="salary" />
</div>
<!-- button按钮点击后会默认提交，即点击后浏览器地址栏会改变。如果不想要这种变化，可添加'type="button"'属性 -->
<button id="btn" type="button">添加</button>
</form>
<script>
// 1. 实现删除员工信息操作
// 获取页面所有的删除链接
let links = document.links
// 事件委托给document
document.addEventListener("click", event => {
if ([...links].includes(event.target)) {
const tr = event.target.parentNode.parentNode
const empName = tr.firstElementChild.textContent
// 或
// const empName = tr.getElementsByTagName("td")[0].textContent
if (confirm("确认删除【" + empName + "】?"))
tr.remove()
}
})
// 2. 实现添加员工信息功能
const btn = document.getElementById("btn")
// 易错点：注意这里易错写成const tbody = document.getElementsByTagName("tbody")，document.getElementsByTagName()返回的是一个类数组对象，应加[0]表示获取其第一个元素
// const tbody = document.getElementsByTagName("tbody")[0]
// 或
const tbody = document.querySelector("tbody")
// btn.addEventListener("click",function(){
btn.onclick = function () {
const name = document.getElementById("name").value
const email = document.getElementById("email").value
const salary = document.getElementById("salary").value
const tr = document.createElement("tr")
const nameTd = document.createElement("td")
const emailTd = document.createElement("td")
const salaryTd = document.createElement("td")
nameTd.textContent = name;
emailTd.textContent = email;
salaryTd.textContent = salary;
// tbody.insertAdjacentElement("beforend","tr")
tbody.appendChild(tr)
tr.appendChild(nameTd)
tr.appendChild(emailTd)
tr.appendChild(salaryTd)
// 没有用户输入的部分可以使用insertAdjacentHTML方法直接添加HTML
tr.insertAdjacentHTML("beforeend", '<td><a href="javascript:;">删除</a></td>')
// 及时给新添加的行绑定删除操作的事件处理程序
}
</script>
</div>
</body>
</html>
运行效果
802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
