使用HTML、CSS和JavaScript (ES6) 构建学生信息管理系统

"使用HTML+CSS+JS在ES6语法下完成一个学生信息管理系统，实现增删改查操作"\n\n下面是一个使用HTML+CSS+JS在ES6语法下完成的学生信息管理系统的示例：\n\nHTML部分：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>学生信息管理系统</title>\n <style>\n table {\n width: 100%;\n border-collapse: collapse;\n }\n \n th, td {\n padding: 8px;\n text-align: left;\n border-bottom: 1px solid #ddd;\n }\n \n form {\n margin-bottom: 10px;\n }\n </style>\n</head>\n<body>\n <h1>学生信息管理系统</h1>\n \n <form id="student-form">\n <h2>添加/编辑学生信息</h2>\n <label for="name">姓名:</label>\n <input type="text" id="name" required>\n <label for="age">年龄:</label>\n <input type="number" id="age" required>\n <label for="gender">性别:</label>\n <select id="gender">\n <option value="male">男</option>\n <option value="female">女</option>\n </select>\n <button type="submit" id="save-btn">保存</button>\n <button type="button" id="cancel-btn">取消</button>\n </form>\n \n <h2>学生列表</h2>\n \n <table id="student-table">\n <thead>\n <tr>\n <th>姓名</th>\n <th>年龄</th>\n <th>性别</th>\n <th>操作</th>\n </tr>\n </thead>\n <tbody id="student-list"></tbody>\n </table>\n \n <script src="script.js"></script>\n</body>\n</html>\n\n\nCSS部分：\n\ncss\n/* 样式已在HTML部分中给出 */\n\n\nJS部分：\n\njavascript\n// 定义学生类\nclass Student {\n constructor(name, age, gender) {\n this.name = name;\n this.age = age;\n this.gender = gender;\n }\n}\n\n// 初始化学生列表\nlet students = [];\n\n// 获取DOM元素\nconst studentForm = document.getElementById('student-form');\nconst studentList = document.getElementById('student-list');\n\n// 添加/编辑学生\nstudentForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const name = document.getElementById('name').value;\n const age = document.getElementById('age').value;\n const gender = document.getElementById('gender').value;\n \n // 如果是编辑学生信息\n const saveBtn = document.getElementById('save-btn');\n if (saveBtn.dataset.id) {\n const studentId = saveBtn.dataset.id;\n students[studentId].name = name;\n students[studentId].age = age;\n students[studentId].gender = gender;\n saveBtn.removeAttribute('data-id');\n } else {\n const student = new Student(name, age, gender);\n students.push(student);\n }\n \n // 清空表单并重新渲染学生列表\n studentForm.reset();\n renderStudentList();\n});\n\n// 取消编辑学生信息\nconst cancelBtn = document.getElementById('cancel-btn');\ncancelBtn.addEventListener('click', () => {\n studentForm.reset();\n const saveBtn = document.getElementById('save-btn');\n saveBtn.removeAttribute('data-id');\n});\n\n// 删除学生\nconst deleteStudent = (studentId) => {\n students.splice(studentId, 1);\n renderStudentList();\n};\n\n// 编辑学生\nconst editStudent = (studentId) => {\n const student = students[studentId];\n document.getElementById('name').value = student.name;\n document.getElementById('age').value = student.age;\n document.getElementById('gender').value = student.gender;\n const saveBtn = document.getElementById('save-btn');\n saveBtn.dataset.id = studentId;\n};\n\n// 渲染学生列表\nconst renderStudentList = () => {\n studentList.innerHTML = '';\n \n students.forEach((student, index) => {\n const row = document.createElement('tr');\n \n const nameCell = document.createElement('td');\n nameCell.textContent = student.name;\n row.appendChild(nameCell);\n \n const ageCell = document.createElement('td');\n ageCell.textContent = student.age;\n row.appendChild(ageCell);\n \n const genderCell = document.createElement('td');\n genderCell.textContent = student.gender;\n row.appendChild(genderCell);\n \n const actionCell = document.createElement('td');\n const editBtn = document.createElement('button');\n editBtn.textContent = '编辑';\n editBtn.addEventListener('click', () => {\n editStudent(index);\n });\n actionCell.appendChild(editBtn);\n \n const deleteBtn = document.createElement('button');\n deleteBtn.textContent = '删除';\n deleteBtn.addEventListener('click', () => {\n deleteStudent(index);\n });\n actionCell.appendChild(deleteBtn);\n \n row.appendChild(actionCell);\n \n studentList.appendChild(row);\n });\n};\n\n// 初始化页面\nrenderStudentList();\n\n\n以上代码实现了一个简单的学生信息管理系统，可以添加、编辑、删除学生信息，并显示学生列表。\n\n