js考核第五题
题五：动态表格
要求：
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第五题