动态表格案例
动态表格案例
一、需求
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