js考核第五题
- 创业
- 2025-09-05 23:09:02
题五：动态表格
要求：
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第五题
