动态表格案例

动态表格案例 一、需求

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> 学号：<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-->tr row.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> 五、样式截图 六、实现原理 html搭好表格框架css设置样式为删除按钮添加点击事件，利用parentNode由button->td->tr->tbody逐个查找，从tbody中删除row=button.parentNode.parentNode构建addStudentMsg函数，将input输入内容填入新增行对应单元格，为新增加的删除按钮绑定删除事件，并清空表单内容为添加按钮添加点击事件，添加表单由display;none转化为display:block。为submit按钮添加点击事件回调函数为addStudent，并随后将添加表单隐藏为关闭按钮添加点击事件，添加表单由display;block转化为display:none