ES6 学生信息管理系统 - HTML, CSS, JavaScript 实现增删改查功能 - 常规

以下是一个使用 HTML、CSS 和 JavaScript（ES6 语法）完成的学生信息管理系统的示例代码：\n\nHTML 部分：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset="UTF-8">\n <title>学生信息管理系统</title>\n <link rel="stylesheet" type="text/css" href="style.css">\n</head>\n<body>\n <h1>学生信息管理系统</h1>\n\n <div id="controls">\n <button id="addBtn">增加</button>\n <button id="deleteBtn">删除</button>\n <button id="updateBtn">更改</button>\n <button id="viewBtn">查看</button>\n </div>\n\n <div id="studentList">\n <table>\n <thead>\n <tr>\n <th></th>\n <th>学号</th>\n <th>姓名</th>\n <th>年龄</th>\n </tr>\n </thead>\n <tbody></tbody>\n </table>\n\n <div id="pagination"></div>\n </div>\n\n <div id="overlay"></div>\n <div id="modal">\n <h2 id="modalTitle"></h2>\n <form id="modalForm">\n <label for="studentId">学号：</label>\n <input type="text" id="studentId" required><br>\n <label for="studentName">姓名：</label>\n <input type="text" id="studentName" required><br>\n <label for="studentAge">年龄：</label>\n <input type="number" id="studentAge" required><br>\n <button type="submit" id="modalSubmit"></button>\n </form>\n </div>\n\n <script src="script.js"></script>\n</body>\n</html>\n\n\nCSS 部分（style.css）：\n\ncss\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n}\n\nh1 {\n text-align: center;\n}\n\n#controls {\n margin-bottom: 20px;\n}\n\n#studentList table {\n width: 100%;\n border-collapse: collapse;\n}\n\n#studentList th, #studentList td {\n border: 1px solid #ddd;\n padding: 8px;\n}\n\n#pagination {\n text-align: center;\n margin-top: 20px;\n}\n\n#overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: none;\n}\n\n#modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n display: none;\n}\n\n#modalTitle {\n text-align: center;\n}\n\n#modalForm label {\n display: inline-block;\n width: 60px;\n text-align: right;\n margin-right: 10px;\n}\n\n#modalForm input {\n width: 200px;\n margin-bottom: 10px;\n}\n\n#modalSubmit {\n margin-left: 70px;\n}\n\n\nJavaScript 部分（script.js）：\n\njavascript\n// 学生信息列表\nlet studentData = [];\n\n// 当前页数\nlet currentPage = 1;\n\n// 每页显示的学生数量\nconst pageSize = 10;\n\n// 获取 DOM 元素\nconst addBtn = document.getElementById('addBtn');\nconst deleteBtn = document.getElementById('deleteBtn');\nconst updateBtn = document.getElementById('updateBtn');\nconst viewBtn = document.getElementById('viewBtn');\nconst studentList = document.querySelector('#studentList tbody');\nconst pagination = document.getElementById('pagination');\nconst overlay = document.getElementById('overlay');\nconst modal = document.getElementById('modal');\nconst modalTitle = document.getElementById('modalTitle');\nconst modalForm = document.getElementById('modalForm');\nconst modalSubmit = document.getElementById('modalSubmit');\nconst studentIdInput = document.getElementById('studentId');\nconst studentNameInput = document.getElementById('studentName');\nconst studentAgeInput = document.getElementById('studentAge');\n\n// 初始化学生列表和分页\nfunction initStudentList() {\n // 清空学生列表\n studentList.innerHTML = '';\n\n // 计算当前页的起始学生索引和结束学生索引\n const startIndex = (currentPage - 1) * pageSize;\n const endIndex = startIndex + pageSize;\n\n // 获取当前页的学生数据\n const currentStudents = studentData.slice(startIndex, endIndex);\n\n // 遍历学生数据，生成表格行\n currentStudents.forEach(student => {\n const tr = document.createElement('tr');\n tr.innerHTML = `\n <td><input type="checkbox" value="${student.id}"></td>\n <td>${student.id}</td>\n <td>${student.name}</td>\n <td>${student.age}</td>\n `;\n studentList.appendChild(tr);\n });\n\n // 更新分页导航\n updatePagination();\n}\n\n// 更新分页导航\nfunction updatePagination() {\n // 计算总页数\n const totalPages = Math.ceil(studentData.length / pageSize);\n\n // 清空分页导航\n pagination.innerHTML = '';\n\n // 生成并添加页码按钮\n for (let i = 1; i <= totalPages; i++) {\n const pageBtn = document.createElement('button');\n pageBtn.innerText = i;\n pageBtn.addEventListener('click', () => {\n currentPage = i;\n initStudentList();\n });\n pagination.appendChild(pageBtn);\n }\n}\n\n// 显示模态框\nfunction showModal(title, submitText, onSubmit) {\n overlay.style.display = 'block';\n modal.style.display = 'block';\n modalTitle.innerText = title;\n modalSubmit.innerText = submitText;\n\n // 清空输入框的值\n studentIdInput.value = '';\n studentNameInput.value = '';\n studentAgeInput.value = '';\n\n // 设置模态框提交事件\n modalForm.onsubmit = e => {\n e.preventDefault();\n onSubmit();\n };\n}\n\n// 隐藏模态框\nfunction hideModal() {\n overlay.style.display = 'none';\n modal.style.display = 'none';\n}\n\n// 增加学生信息\nfunction addStudent() {\n showModal('增加学生', '确定', () => {\n const id = studentIdInput.value.trim();\n const name = studentNameInput.value.trim();\n const age = studentAgeInput.value.trim();\n\n // 验证输入的学生信息\n if (!id || !name || !age) {\n alert('请输入完整的学生信息');\n return;\n }\n\n // 添加学生到列表末尾\n studentData.push({\n id: id,\n name: name,\n age: age\n });\n\n // 隐藏模态框\n hideModal();\n\n // 初始化学生列表\n initStudentList();\n });\n}\n\n// 删除选中的学生信息\nfunction deleteStudent() {\n const selectedStudents = Array.from(document.querySelectorAll('#studentList input:checked'));\n if (selectedStudents.length === 0) {\n alert('请选择要删除的学生');\n return;\n }\n\n // 获取选中学生的 ID\n const selectedIds = selectedStudents.map(student => student.value);\n\n // 根据 ID 过滤出未选中的学生\n studentData = studentData.filter(student => !selectedIds.includes(student.id));\n\n // 初始化学生列表\n initStudentList();\n}\n\n// 更改选中的学生信息\nfunction updateStudent() {\n const selectedStudents = Array.from(document.querySelectorAll('#studentList input:checked'));\n if (selectedStudents.length !== 1) {\n alert('请选择一个要更改的学生');\n return;\n }\n\n // 获取选中学生的 ID\n const selectedId = selectedStudents[0].value;\n\n // 根据 ID 查找学生信息\n const selectedStudent = studentData.find(student => student.id === selectedId);\n\n // 填充模态框的输入框\n studentIdInput.value = selectedStudent.id;\n studentNameInput.value = selectedStudent.name;\n studentAgeInput.value = selectedStudent.age;\n\n showModal('更改学生', '确定', () => {\n const id = studentIdInput.value.trim();\n const name = studentNameInput.value.trim();\n const age = studentAgeInput.value.trim();\n\n // 验证输入的学生信息\n if (!id || !name || !age) {\n alert('请输入完整的学生信息');\n return;\n }\n\n // 更新学生信息\n selectedStudent.id = id;\n selectedStudent.name = name;\n selectedStudent.age = age;\n\n // 隐藏模态框\n hideModal();\n\n // 初始化学生列表\n initStudentList();\n });\n}\n\n// 查看选中的学生信息\nfunction viewStudent() {\n const selectedStudents = Array.from(document.querySelectorAll('#studentList input:checked'));\n if (selectedStudents.length !== 1) {\n alert('请选择一个要查看的学生');\n return;\n }\n\n // 获取选中学生的 ID\n const selectedId = selectedStudents[0].value;\n\n // 根据 ID 查找学生信息\n const selectedStudent = studentData.find(student => student.id === selectedId);\n\n showModal('查看学生', '关闭', () => {\n hideModal();\n });\n\n // 填充模态框的输入框（只读）\n studentIdInput.value = selectedStudent.id;\n studentNameInput.value = selectedStudent.name;\n studentAgeInput.value = selectedStudent.age;\n\n // 禁用输入框\n studentIdInput.disabled = true;\n studentNameInput.disabled = true;\n studentAgeInput.disabled = true;\n\n // 隐藏确定按钮\n modalSubmit.style.display = 'none';\n}\n\n// 绑定按钮点击事件\naddBtn.addEventListener('click', addStudent);\ndeleteBtn.addEventListener('click', deleteStudent);\nupdateBtn.addEventListener('click', updateStudent);\nviewBtn.addEventListener('click', viewStudent);\n\n// 初始化学生列表\ninitStudentList();\n\n\n这个学生信息管理系统使用了 HTML、CSS 和 JavaScript（ES6 语法）来实现。页面中有四个按钮（增加、删除、更改和查看），点击按钮会触发相应的功能。其中，增加按钮会弹出一个小框显示需要填入的信息，用户点击确定按钮后会在学生列表中添加一个新的学生。删除按钮会删除用户选择的学生（根据复选框勾选）。更改按钮会弹出一个小框显示当前选中学生的信息，用户可以在其中进行修改，并点击确定按钮后完成更改，然后刷新学生列表。查看按钮会生成一个小框显示当前选中学生的信息。每页最多显示十个学生信息，并实现了翻页功能。