题目：
要求：
1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓 名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底 色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。
要点：（原理）
- 通过.value获取表单内容，再用innerHTML和添加节点，新增到表单上。
- 通过获取删除按钮，绑定事件，进行remove删除节点，不要忘记把新增的内容也获取过来
<!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;
}
/* a{
color: rgb(247, 4, 4);
display: inline-block;
} */
table {
border-collapse: collapse;
width: 800px;
margin: 0 auto;
border-spacing: 20px;
text-align: center;
padding: 10px;
}
.add {
cursor: pointer;
}
a {
color: pink;
display: inline-block;
}
tbody tr:nth-child(odd) {
background-color: black;
color: white;
}
tbody tr:nth-child(even) {
background-color: white;
color: black;
}
thead tr:nth-child(1) {
background-color: greenyellow;
color: black;
}
tr {
height: 40px;
}
.popup {
display: none;
background-color: whitesmoke;
border-radius: 10px;
width: 300px;
height: 350px;
position: absolute;
top: 0px;
left: 40%;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>二级学院</th>
<th>班级</th>
<th>专业</th>
<th>辅导员</th>
<th class="add"><a href="#">添加</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>24250101</td>
<td>小蓝</td>
<td>女</td>
<td>计算机专业</td>
<td>一班</td>
<td>物联网专业</td>
<td>魔仙女王</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>24250102</td>
<td>游乐王子</td>
<td>男</td>
<td>计算机专业</td>
<td>三班</td>
<td>软件工程</td>
<td>魔仙女王</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>24250103</td>
<td>玲珑</td>
<td>女</td>
<td>计算机专业</td>
<td>二班</td>
<td>软件工程</td>
<td>魔仙女王</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>24250104</td>
<td>严莉莉</td>
<td>女</td>
<td>计算机专业</td>
<td>三班</td>
<td>软件工程</td>
<td>魔仙女王</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>24250105</td>
<td>美琪</td>
<td>女</td>
<td>计算机专业</td>
<td>三班</td>
<td>物联网工程</td>
<td>魔仙女王</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>24250106</td>
<td>美雪</td>
<td>女</td>
<td>计算机专业</td>
<td>三班</td>
<td>物联网工程</td>
<td>魔仙女王</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>24250107</td>
<td>小月</td>
<td>女</td>
<td>计算机专业</td>
<td>三班</td>
<td>软件工程</td>
<td>魔仙女王</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>24250108</td>
<td>石小龙</td>
<td>男</td>
<td>计算机专业</td>
<td>三班</td>
<td>软件工程</td>
<td>学校老师</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>24250109</td>
<td>方珍妮</td>
<td>女</td>
<td>计算机专业</td>
<td>三班</td>
<td>软件工程</td>
<td>学校老师</td>
<td><a href="#" class="del">删除</a></td>
</tr>
<tr>
<td>24250110</td>
<td>魔仙小千</td>
<td>女</td>
<td>计算机专业</td>
<td>三班</td>
<td>软件工程</td>
<td>魔仙女王</td>
<td><a href="#" class="del">删除</a></td>
</tr>
</tbody>
</table>
<!-- 添加表单弹出框 -->
<div class="popup" id="addPopup">
<div class="popup-content">
<!-- <span class="close" id="closeAddPopup">×</span> -->
<form id="addForm">
<label for="studentId">学号:</label>
<input type="text" id="studentId" name="studentId"><br><br>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="男">男</option>
<option value="女">女</option>
</select><br><br>
<label for="college">二级学院:</label>
<input type="text" id="college" name="college"><br><br>
<label for="class">班级:</label>
<input type="text" id="class" name="class"><br><br>
<label for="major">专业:</label>
<input type="text" id="major" name="major"><br><br>
<label for="counselor">辅导员:</label>
<input type="text" id="counselor" name="counselor"><br><br>
<input type="submit" value="提交" class="ok">
</form>
</div>
</div>
</body>
<script>
const add = document.querySelector('.add')
const popUp = document.querySelector('.popup')
const addForm = document.querySelector('#addForm')
add.addEventListener('click',function() {
popUp.style.display = 'block';
})
addForm.addEventListener('submit',function(e) {
e.preventDefault()
const studentId = document.querySelector('#studentId').value
const name = document.querySelector('#name').value
const gender = document.querySelector('#gender').value
const college = document.querySelector('#college').value
const Class = document.querySelector('#class').value
const major = document.querySelector('#major').value
const counselor = document.querySelector('#counselor').value
const tableBody = document.querySelector('tbody')
const newText = document.createElement('tr')
newText.innerHTML = `
<td>${studentId}</td>
<td>${name}</td>
<td>${gender}</td>
<td>${college}</td>
<td>${Class}</td>
<td>${major}</td>
<td>${counselor}</td>
<td><a href="#" class="del">删除</a></td>
`
popUp.style.display = 'none';
tableBody.appendChild(newText)
const dels = document.querySelectorAll('.del')
dels.forEach(function(button){
button.addEventListener('click',function(e) {
e.preventDefault()
if(confirm('你确定要删除吗？')) {
let All = this.parentNode.parentNode
All.parentNode.removeChild(All)
}
})
})
})
</script>
</html>
视频演示：
动态表格