温州电力建设有限公司网站东莞网站推广培训

动态表格案例

一、需求

1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓 名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底 色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。

二、html部分

<button class="addButton" style="float: right;">添加</button>
<table class="studentTable"><thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>二级学院</th><th>班级</th><th>专业</th><th>辅导员</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>李华</td><td>男</td><td>计算机学院</td><td>计科 1 班</td><td>计算机科学与技术</td><td>张老师</td><td><button class="removeButton">删除</button></td></tr><tr><td>2</td><td>王丽</td><td>女</td><td>电子信息学院</td><td>电信 2 班</td><td>电子信息工程</td><td>王老师</td><td><button class="removeButton">删除</button></td></tr><tr><td>3</td><td>赵强</td><td>男</td><td>机械工程学院</td><td>机制 3 班</td><td>机械设计制造及其自动化</td><td>刘老师</td><td><button class="removeButton">删除</button></td></tr><tr><td>4</td><td>陈悦</td><td>女</td><td>经济管理学院</td><td>工商 4 班</td><td>工商管理</td><td>孙老师</td><td><button class="removeButton">删除</button></td></tr><tr><td>5</td><td>周阳</td><td>男</td><td>化学化工学院</td><td>化工 5 班</td><td>化学工程与工艺</td><td>吴老师</td><td><button class="removeButton">删除</button></td></tr><tr><td>6</td><td>林娜</td><td>女</td><td>外国语学院</td><td>英语 6 班</td><td>英语</td><td>郑老师</td><td><button class="removeButton">删除</button></td></tr><tr><td>7</td><td>胡俊</td><td>男</td><td>体育学院</td><td>体教 7 班</td><td>体育教育</td><td>冯老师</td><td><button class="removeButton">删除</button></td></tr><tr><td>8</td><td>郭瑶</td><td>女</td><td>艺术学院</td><td>设计 8 班</td><td>环境设计</td><td>陈老师</td><td><button class="removeButton">删除</button></td></tr><tr><td>9</td><td>马明</td><td>男</td><td>数学与统计学院</td><td>数应 9 班</td><td>数学与应用数学</td><td>杨老师</td><td><button class="removeButton">删除</button></td></tr><tr><td>10</td><td>何婷</td><td>女</td><td>生物科学学院</td><td>生科 10 班</td><td>生物科学</td><td>黄老师</td><td><button class="removeButton">删除</button></td></tr></tbody>
</table>
<div class="addStudent"><h2>新增学生</h2>![请添加图片描述](https://i-blog.csdnimg.cn/direct/67d33cdda5ec40f6989547c68fd0df36.gif)学号：<input type="text" id="studentId"><br>姓名：<input type="text" id="name"><br>性别：<input type="text" id="gender"><br>二级学院：<input type="text" id="college"><br>班级：<input type="text" id="classInfo"><br>专业：<input type="text" id="major"><br>辅导员：<input type="text"d id="counselor"><br><button class="submit">提交</button><button class="close">关闭</button>
</div>

三、css部分

<style>table {border-collapse: collapse;width: 100%;}th,td{border:1px solid black;padding:5px;}tr:nth-child(odd) {color: black;background-color: white;}tr:nth-child(even) {color: white;background-color: black;}button {cursor:pointer;}.addStudent{width: 380px;height: 280px;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-150px;background-color: white;border:2px solid black;padding:10px;display:none;}
</style>

四、JavaScript部分

<script>const studentTable = document.querySelector('.studentTable')const addButton=document.querySelector('.addButton')const removeButton=document.querySelectorAll('.removeButton')const submit=document.querySelector('.submit')const close=document.querySelector('.close')const addStudent = document.querySelector('.addStudent')//删除学生信息removeButton.forEach(function(button){    //button 就是回调函数的参数，它代表了当前正在处理的按钮元素button.addEventListener('click',function(){if(confirm('确认要删除吗')){     //confirm返回一个有确认和取消的弹窗const row = this.parentNode.parentNode//button-->td-->trrow.parentNode.removeChild(row);//tr-->tbody}})})//增加学生信息function addStudentMsg(){const studentId = document.querySelector('#studentId')const name = document.querySelector('#name')const gender = document.querySelector('#gender')const college = document.querySelector('#college')const classInfo = document.querySelector('#classInfo')const major = document.querySelector('#major')const counselor = document.querySelector('#counselor')const newRow = studentTable.insertRow(-1)//值为-1表示在表格最后一行插入新行//新行的单元格插入内容const cell1 = newRow.insertCell(0);const cell2 = newRow.insertCell(1);const cell3 = newRow.insertCell(2);const cell4 = newRow.insertCell(3);const cell5 = newRow.insertCell(4);const cell6 = newRow.insertCell(5);const cell7 = newRow.insertCell(6);const cell8 = newRow.insertCell(7);cell1.innerHTML = studentId.value;cell2.innerHTML = name.value;cell3.innerHTML = gender.value;cell4.innerHTML = college.value;cell5.innerHTML = classInfo.value;cell6.innerHTML = major.value;cell7.innerHTML = counselor.value;cell8.innerHTML = '<button class="removeButton">删除</button>'//清空表单内容studentId.value = '';name.value = '';gender.value = '';college.value = '';classInfo.value = '';major.value = '';counselor.value = '';// 为新添加的删除按钮绑定删除事件const newRemoveButton = cell8.querySelector('.removeButton');newRemoveButton.addEventListener('click', function () {if (confirm('确认要删除吗')) {const row = this.parentNode.parentNode;row.parentNode.removeChild(row);}});}//点开弹窗addButton.addEventListener('click',function(){addStudent.style.display='block'submit.addEventListener('click',function(){addStudentMsg()addStudent.style.display='none'})})//关闭弹窗close.addEventListener('click',function(){addStudent.style.display='none'})
</script>

五、样式截图

六、实现原理

1. html搭好表格框架css设置样式
2. 为删除按钮添加点击事件，利用parentNode由button->td->tr->tbody逐个查找，从tbody中删除row=button.parentNode.parentNode
3. 构建addStudentMsg函数，将input输入内容填入新增行对应单元格，为新增加的删除按钮绑定删除事件，并清空表单内容
4. 为添加按钮添加点击事件，添加表单由display;none转化为display:block。为submit按钮添加点击事件回调函数为addStudent，并随后将添加表单隐藏
5. 为关闭按钮添加点击事件，添加表单由display;block转化为display:none