事件（二）实战案例
员工信息管理系统
我们当前的目标非常简单，实现功能即可，代码好看不好看不重要，能跑起来不报错就行😶。如果有改正建议欢迎来私聊。
完整功能流程
页面加载：
- 初始化员工数据
- 调用
renderTable()渲染表格
新增员工：
- 点击"新增员工"按钮
- 显示弹窗，清空输入框
- 输入员工信息
- 点击"保存"
- 创建新员工对象并添加到数组
- 重新渲染表格
编辑员工：
- 点击某行的"编辑"按钮
- 显示弹窗，填入该员工信息
- 修改信息
- 点击"保存"
- 更新数组中的员工对象
- 重新渲染表格
删除员工：
- 点击某行的"删除"按钮
- 弹出确认对话框
- 确认后从数组中移除该员工
- 重新渲染表格
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}table {border: 1px solid #000;}table th {border: 1px solid black;}table td {border: 1px solid black;}.mask {position: fixed;top: 0;right: 0;width: 100%;height: 100%;background-color: #000;opacity: 0.2;}.ipt-box {position: fixed;left: 40%;top: 40%;margin: auto;background-color: #fff;width: 230px;height: 180px;padding: 30px;}</style>
</head><body><div class="box"><h1>员工信息表</h1><button id="add">新增员工</button><br></div><table><thead><tr><th>工号</th><th>姓名</th><th>部门</th><th>职位</th><th>年龄</th><th>薪资</th><th>操作</th></tr></thead><tbody></tbody></table><!-- 弹窗 --><div class="mask" hidden></div><div class="ipt-box" hidden>姓名<input type="text" name="name"></input><br>部门<input type="text" name="department"></input><br>职位<input type="text" name="position"></input><br>年龄<input type="text" name="age"></input><br>薪资<input type="text" name="salary"></input><br><button id="save">保存</button><button id="cancel">取消</button></div><script>// 变量及数据let mask = document.querySelector('.mask');let iptBox = document.querySelector('.ipt-box');let name = document.querySelector('[name="name"]');let department = document.querySelector('[name="department"]');let position = document.querySelector('[name="position"]');let age = document.querySelector('[name="age"]');let salary = document.querySelector('[name="salary"]');let num = 3let editIndex = -1;//当前修改的是哪一条let employees = [{ employeeId: 'EMP001', name: '张三', department: '技术部', position: '工程师', age: 28, salary: 8000 },{ employeeId: 'EMP002', name: '李四', department: '销售部', position: '销售员', age: 25, salary: 6000 },{ employeeId: 'EMP003', name: '王五', department: '人事部', position: '专员', age: 30, salary: 7000 }]// // 渲染// let str = ``;// for (let i = 0; i < employees.length; i++) {// str += `<tr>// <td>${employees[i].employeeId}</td>// <td>${employees[i].name}</td>// <td>${employees[i].department}</td>// <td>${employees[i].position}</td>// <td>${employees[i].age}</td>// <td>${employees[i].salary}</td>// <td>// <button class="btn1">编辑</button>// <button class="btn2">删除</button>// </td>// </tr>// `;// }// document.querySelector('tbody').innerHTML = str;// // 删除// document.querySelector('tbody').addEventListener('click', function (e) {// if (e.target.classList.contains('btn2')) {// e.target.parentNode.parentNode.remove();// }// });// 1.渲染数据function renderTable(arr) {let htmlStr = '';arr.forEach(function (item) {htmlStr += `<tr><td>${item.employeeId}</td><td>${item.name}</td><td>${item.department}</td><td>${item.position}</td><td>${item.age}</td><td>${item.salary}</td><td><button class="btn1">编辑</button><button class="btn2">删除</button></td></tr>`;})document.querySelector('table tbody').innerHTML = htmlStr;}renderTable(employees)// 2.新增// 2.1点击显示窗口add.onclick = function () {editIndex = -1; // 设置为新增模式// 清空输入框name.value = ''department.value = ''position.value = ''age.value = ''salary.value = ''mask.hidden = false;iptBox.hidden = false;}// 2.2点击遮罩隐藏窗口mask.onclick = function () {mask.hidden = true;iptBox.hidden = true;}// 2.3保存提交按钮save.onclick = function () {if (editIndex < 0) {// 新数据let userObj = {employeeId: 'EMP' + ++num,name: name.value,department: department.value,position: position.value,age: age.value,salary: salary.value};// 数组列表新增employees.push(userObj);// 数据变了，重新调用函数渲染renderTable(employees)alert('保存成功');} else {let editObj = employees[editIndex]//找到目标editObj.name = name.valueeditObj.department = department.valueeditObj.position = position.valueeditObj.age = age.valueeditObj.salary = salary.valuealert('修改成功')editIndex = -1// 数据变了，重新调用函数渲染renderTable(employees)}// 清空输入框name.value = ''department.value = ''position.value = ''age.value = ''salary.value = ''// 隐藏窗口mask.hidden = trueiptBox.hidden = true}// 3.编辑和删除// 事件委托document.querySelector('table tbody').addEventListener('click', function (e) {if (e.target.classList.contains('btn1')) {// 是编辑框// 显示窗口mask.hidden = falseiptBox.hidden = false// 找到这一行的数据let tr = e.target.closest('tr')// console.log(tr);let td1 = tr.querySelectorAll('td')[0].innerTextlet td2 = tr.querySelectorAll('td')[1].innerTextlet td3 = tr.querySelectorAll('td')[2].innerTextlet td4 = tr.querySelectorAll('td')[3].innerTextlet td5 = tr.querySelectorAll('td')[4].innerTextlet td6 = tr.querySelectorAll('td')[5].innerTextconsole.log(td1, td2, td3, td4, td5, td6);// 找到对应条件的数据的索引editIndex = employees.findIndex(item => {return item.employeeId === td1&& item.name === td2&& item.department === td3&& item.position === td4&& item.age == td5&& item.salary == td6})// 赋值输入框name.value = td2department.value = td3position.value = td4age.value = td5salary.value = td6}// 删除document.querySelector('tbody').addEventListener('click', function (e) {if (e.target.classList.contains('btn2')) {confirm('确定要删除吗？')e.target.parentNode.parentNode.remove();}});})</script>
</body></html>