专业3合1网站建设公司seo标题优化
题五：动态表格
要求：
1.表格由专业班级学号1-10号同学的信息组成，包括：学号、姓 名、性别、二级学院、班级、专业、辅导员；
2.表格的奇数行字体为黑色，底色为白色；偶数行字体为白色，底 色为黑色；
3.表格的每一行后有一个删除按钮，点击后会跳出提示弹窗，确认后删除该行的内容，并且删除后上述的颜色规律保持不变：
4.表格的右上方有一个添加按钮，点击后跳出一个表单弹窗，可以填加新的学生的信息。
html
<body><div class="table-container"><button id="add-btn" class="add-btn">添加学生</button><table class="student-table"><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="delete-btn">删除</button></td></tr><tr><td>2</td><td>李四</td><td>女</td><td>信息学院</td><td>2班</td><td>网络工程</td><td>王老师</td><td><button class="delete-btn">删除</button></td></tr></tbody></table></div><div class="form-popup" id="add-form"><h3>添加学生信息</h3><input type="text" id="student-id" placeholder="学号"><input type="text" id="student-name" placeholder="姓名"><input type="text" id="student-gender" placeholder="性别"><input type="text" id="student-college" placeholder="二级学院"><input type="text" id="student-class" placeholder="班级"><input type="text" id="student-major" placeholder="专业"><input type="text" id="student-counselor" placeholder="辅导员"><button id="submit-add">提交</button><button id="cancel-add">取消</button></div>css
body {margin: 0;padding: 0;background-color: #fff;}.table-container {max-width: 1200px;margin: 50px auto;padding: 20px;background-color: #fff;position: relative;}.add-btn {position: absolute;top: 0px;right: 0px;padding: 10px 20px;background-color: #28a745;color: white;border: none;cursor: pointer;border-radius: 4px;}.add-btn:hover {background-color: #218838;}table {width: 100%;border-collapse: collapse;}th,td {padding: 10px;text-align: left;border: 1px solid #ddd;}th {background-color: #007bff;color: white;}tr:nth-child(odd) {background-color: #ffffff;color: black;}tr:nth-child(even) {background-color: black;color: #ffffff;}.delete-btn {padding: 5px 10px;color: #fff;border: none;cursor: pointer;border-radius: 4px;background: #007bff;}.delete-btn:hover {background-color: red;}.form-popup {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: white;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);z-index: 10;}.form-popup input {display: block;width: 100%;margin-bottom: 10px;padding: 5px;}.form-popup button {padding: 5px 10px;margin-right: 10px;}js
document.addEventListener('DOMContentLoaded', function () {// 获取表格元素const studentTable = document.querySelector('.student-table');const tbody = studentTable.querySelector('tbody');const addBtn = document.getElementById('add-btn');const addForm = document.getElementById('add-form');const submitAdd = document.getElementById('submit-add');const cancelAdd = document.getElementById('cancel-add');// 为所有已有的删除按钮添加点击事件处理document.querySelectorAll('.delete-btn').forEach(btn => {btn.addEventListener('click', function () {if (confirm('确定要删除该学生信息吗？')) {const row = btn.closest('tr');row.remove();updateRowColors();}});});// 显示添加表单addBtn.addEventListener('click', function () {addForm.style.display = 'block';});// 取消添加cancelAdd.addEventListener('click', function () {addForm.style.display = 'none';});// 提交添加信息submitAdd.addEventListener('click', function () {const id = document.getElementById('student-id').value;const name = document.getElementById('student-name').value;const gender = document.getElementById('student-gender').value;const college = document.getElementById('student-college').value;const classInfo = document.getElementById('student-class').value;const major = document.getElementById('student-major').value;const counselor = document.getElementById('student-counselor').value;if (id && name && gender && college && classInfo && major && counselor) {const newRow = document.createElement('tr');const cells = [id, name, gender, college, classInfo, major, counselor];cells.forEach(cellText => {const cell = document.createElement('td');cell.textContent = cellText;newRow.appendChild(cell);});const deleteCell = document.createElement('td');const deleteBtn = document.createElement('button');deleteBtn.classList.add('delete-btn');deleteBtn.textContent = '删除';deleteBtn.addEventListener('click', function () {if (confirm('确定要删除该学生信息吗？')) {const row = deleteBtn.closest('tr');row.remove();updateRowColors();}});deleteCell.appendChild(deleteBtn);newRow.appendChild(deleteCell);tbody.appendChild(newRow);addForm.style.display = 'none';updateRowColors();// 清空表单document.querySelectorAll('student-id').value = '';document.querySelectorAll('student-name').value = '';document.querySelectorAll('student-gender').value = '';document.querySelectorAll('student-college').value = '';document.querySelectorAll('student-class').value = '';document.querySelectorAll('student-major').value = '';document.querySelectorAll('student-counselor').value = '';} else {alert('请填写所有信息！');}});// 更新表格行的颜色，确保奇偶行颜色交替function updateRowColors() {const rows = studentTable.querySelectorAll('tbody tr');rows.forEach((row, index) => {row.style.backgroundColor = index % 2 === 0 ? '#ffffff' : '#000000';row.style.color = index % 2 === 0 ? '#000000' : '#ffffff';});}// 初始化表格行颜色updateRowColors();});js第五题