学生信息管理系统 - HTML实现增删改查
学生信息管理系统 - HTML实现增删改查
效果图
代码
<!DOCTYPE html><html lang=\"zh-CN\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>学生信息管理系统</title> <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css\"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { width: 100%; max-width: 1200px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); overflow: hidden; display: flex; flex-direction: column; height: 90vh; } header { background: linear-gradient(to right, #4b6cb7, #182848); color: white; padding: 20px 30px; text-align: center; position: relative; } .logo { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); font-size: 24px; } h1 { font-size: 2.2rem; margin-bottom: 5px; letter-spacing: 1px; } .subtitle { font-size: 1rem; opacity: 0.8; } .content { display: flex; flex: 1; overflow: hidden; } .sidebar { width: 250px; background: #2c3e50; color: white; padding: 20px 0; transition: all 0.3s ease; } .menu-item { padding: 15px 25px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; border-left: 4px solid transparent; } .menu-item:hover, .menu-item.active { background: #34495e; border-left: 4px solid #3498db; } .menu-item i { margin-right: 12px; font-size: 18px; width: 25px; text-align: center; } .main-content { flex: 1; padding: 25px; overflow-y: auto; background: #f8f9fa; } .panel { background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); padding: 25px; margin-bottom: 25px; display: none; } .panel.active { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } h2 { color: #2c3e50; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee; font-size: 1.8rem; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: 600; color: #34495e; } input, select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; transition: border-color 0.3s; } input:focus, select:focus { border-color: #3498db; outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); } button { background: #3498db; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; } button i { margin-right: 8px; } button:hover { background: #2980b9; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .btn-danger { background: #e74c3c; } .btn-danger:hover { background: #c0392b; } .btn-success { background: #2ecc71; } .btn-success:hover { background: #27ae60; } .action-buttons { display: flex; gap: 10px; margin-top: 15px; } .message { padding: 15px; border-radius: 8px; margin: 15px 0; display: flex; align-items: center; } .success { background: #d4edda; color: #155724; border-left: 4px solid #28a745; } .error { background: #f8d7da; color: #721c24; border-left: 4px solid #dc3545; } .info { background: #d1ecf1; color: #0c5460; border-left: 4px solid #17a2b8; } table { width: 100%; border-collapse: collapse; margin-top: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } th, td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 600; } tr:nth-child(even) { background: #f8f9fa; } tr:hover { background: #e3f2fd; } .empty-message { text-align: center; padding: 30px; color: #6c757d; font-size: 18px; } .empty-message i { font-size: 48px; margin-bottom: 15px; color: #adb5bd; } .action-cell { display: flex; gap: 8px; } .action-btn { padding: 8px 12px; font-size: 14px; border-radius: 6px; } footer { text-align: center; padding: 15px; background: #f1f1f1; color: #6c757d; font-size: 14px; border-top: 1px solid #ddd; } @media (max-width: 768px) { .content { flex-direction: column; } .sidebar { width: 100%; padding: 10px 0; } .menu-items { display: flex; overflow-x: auto; } .menu-item { padding: 12px 15px; white-space: nowrap; border-left: none; border-bottom: 4px solid transparent; } .menu-item:hover, .menu-item.active { border-left: none; border-bottom: 4px solid #3498db; } } </style></head><body> <div class=\"container\"> <header> <div class=\"logo\"> <i class=\"fas fa-graduation-cap\"></i> </div> <h1>学生信息管理系统</h1> <div class=\"subtitle\">高效管理学生信息，助力教育信息化</div> </header> <div class=\"content\"> <div class=\"sidebar\"> <div class=\"menu-item active\" data-panel=\"add\"> <i class=\"fas fa-user-plus\"></i> <span>添加学生信息</span> </div> <div class=\"menu-item\" data-panel=\"display\"> <i class=\"fas fa-list\"></i> <span>显示所有学生</span> </div> <div class=\"menu-item\" data-panel=\"delete\"> <i class=\"fas fa-user-minus\"></i> <span>删除学生信息</span> </div> <div class=\"menu-item\" data-panel=\"modify\"> <i class=\"fas fa-edit\"></i> <span>修改学生信息</span> </div> </div> <div class=\"main-content\"> <!-- 添加学生信息面板 --> <div class=\"panel active\" id=\"add-panel\"> <h2><i class=\"fas fa-user-plus\"></i> 添加学生信息</h2> <div class=\"form-group\"> <label for=\"student-id\">学号</label> <input type=\"text\" id=\"student-id\" placeholder=\"请输入学号\"> </div> <div class=\"form-group\"> <label for=\"student-name\">姓名</label> <input type=\"text\" id=\"student-name\" placeholder=\"请输入姓名\"> </div> <div class=\"form-group\"> <label for=\"student-age\">年龄</label> <input type=\"number\" id=\"student-age\" placeholder=\"请输入年龄\"> </div> <div class=\"form-group\"> <label for=\"student-grade\">年级</label> <select id=\"student-grade\"> <option value=\"\">请选择年级</option> <option value=\"大一\">大一</option> <option value=\"大二\">大二</option> <option value=\"大三\">大三</option> <option value=\"大四\">大四</option> <option value=\"研究生\">研究生</option> </select> </div> <div id=\"add-message\"></div> <button id=\"add-btn\"> <i class=\"fas fa-plus-circle\"></i> 添加学生 </button> </div> <!-- 显示所有学生信息面板 --> <div class=\"panel\" id=\"display-panel\"> <h2><i class=\"fas fa-users\"></i> 所有学生信息</h2> <div id=\"students-table-container\"> <div class=\"empty-message\" id=\"empty-message\"> <i class=\"fas fa-user-graduate\"></i> <p>暂无学生信息</p> </div> <table id=\"students-table\" style=\"display: none;\"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>年级</th> <th>操作</th> </tr> </thead> <tbody id=\"students-list\"> <!-- 学生数据将通过JS动态填充 --> </tbody> </table> </div> </div> <!-- 删除学生信息面板 --> <div class=\"panel\" id=\"delete-panel\"> <h2><i class=\"fas fa-user-minus\"></i> 删除学生信息</h2> <div class=\"form-group\"> <label for=\"delete-id\">输入要删除的学生学号</label> <input type=\"text\" id=\"delete-id\" placeholder=\"请输入学号\"> </div> <div id=\"delete-message\"></div> <button id=\"delete-btn\" class=\"btn-danger\"> <i class=\"fas fa-trash-alt\"></i> 删除学生 </button> </div> <!-- 修改学生信息面板 --> <div class=\"panel\" id=\"modify-panel\"> <h2><i class=\"fas fa-user-edit\"></i> 修改学生信息</h2> <div class=\"form-group\"> <label for=\"modify-id\">输入要修改的学生学号</label> <input type=\"text\" id=\"modify-id\" placeholder=\"请输入学号\"> </div> <div id=\"modify-message\"></div> <div id=\"modify-form\" style=\"display: none;\"> <div class=\"form-group\"> <label for=\"modify-name\">姓名</label> <input type=\"text\" id=\"modify-name\" placeholder=\"新姓名（留空则不修改）\"> </div> <div class=\"form-group\"> <label for=\"modify-age\">年龄</label> <input type=\"number\" id=\"modify-age\" placeholder=\"新年龄（留空则不修改）\"> </div> <div class=\"form-group\"> <label for=\"modify-grade\">年级</label> <select id=\"modify-grade\"> <option value=\"\">不修改（保留原年级）</option> <option value=\"大一\">大一</option> <option value=\"大二\">大二</option> <option value=\"大三\">大三</option> <option value=\"大四\">大四</option> <option value=\"研究生\">研究生</option> </select> </div> <button id=\"save-modify-btn\" class=\"btn-success\"> <i class=\"fas fa-save\"></i> 保存修改 </button> </div> </div> </div> </div> <footer> <p>学生信息管理系统 © 2023 | 使用HTML5, CSS3和JavaScript实现</p> </footer> </div> <script> // 学生数据存储 let students = JSON.parse(localStorage.getItem(\'students\')) || []; // DOM元素 const menuItems = document.querySelectorAll(\'.menu-item\'); const panels = document.querySelectorAll(\'.panel\'); // 菜单切换功能 menuItems.forEach(item => { item.addEventListener(\'click\', () => { // 更新菜单激活状态 menuItems.forEach(i => i.classList.remove(\'active\')); item.classList.add(\'active\'); // 显示对应面板 const panelId = item.getAttribute(\'data-panel\') + \'-panel\'; panels.forEach(panel => { panel.classList.remove(\'active\'); if(panel.id === panelId) { panel.classList.add(\'active\'); // 如果是显示面板，刷新学生列表 if(panelId === \'display-panel\') { displayStudents(); } } }); }); }); // 添加学生功能 document.getElementById(\'add-btn\').addEventListener(\'click\', () => { const id = document.getElementById(\'student-id\').value.trim(); const name = document.getElementById(\'student-name\').value.trim(); const age = document.getElementById(\'student-age\').value.trim(); const grade = document.getElementById(\'student-grade\').value; const messageDiv = document.getElementById(\'add-message\'); // 验证输入 if(!id || !name || !age || !grade) { showMessage(messageDiv, \'请填写所有必填字段\', \'error\'); return; } // 检查学号是否已存在 if(students.some(student => student.id === id)) { showMessage(messageDiv, \'该学号已存在，无法重复添加\', \'error\'); return; } // 添加学生 students.push({ id: id, name: name, age: age, grade: grade }); // 保存到localStorage saveToLocalStorage(); // 显示成功消息 showMessage(messageDiv, `成功添加学生: ${name}`, \'success\'); // 清空表单 document.getElementById(\'student-id\').value = \'\'; document.getElementById(\'student-name\').value = \'\'; document.getElementById(\'student-age\').value = \'\'; document.getElementById(\'student-grade\').selectedIndex = 0; }); // 显示所有学生 function displayStudents() { const tableBody = document.getElementById(\'students-list\'); const table = document.getElementById(\'students-table\'); const emptyMessage = document.getElementById(\'empty-message\'); // 清空表格 tableBody.innerHTML = \'\'; if(students.length === 0) { table.style.display = \'none\'; emptyMessage.style.display = \'block\'; return; } emptyMessage.style.display = \'none\'; table.style.display = \'table\'; // 填充表格 students.forEach(student => { const row = document.createElement(\'tr\'); row.innerHTML = ` <td>${student.id}</td> <td>${student.name}</td> <td>${student.age}</td> <td>${student.grade}</td> <td class=\"action-cell\"> <button class=\"action-btn btn-danger delete-row\" data-id=\"${student.id}\"> <i class=\"fas fa-trash\"></i> </button> <button class=\"action-btn btn-success edit-row\" data-id=\"${student.id}\"> <i class=\"fas fa-edit\"></i> </button> </td> `; tableBody.appendChild(row); }); // 添加行内删除事件 document.querySelectorAll(\'.delete-row\').forEach(btn => { btn.addEventListener(\'click\', () => { const id = btn.getAttribute(\'data-id\'); deleteStudent(id); }); }); // 添加行内编辑事件 document.querySelectorAll(\'.edit-row\').forEach(btn => { btn.addEventListener(\'click\', () => { const id = btn.getAttribute(\'data-id\'); // 切换到修改面板 menuItems.forEach(item => { if(item.getAttribute(\'data-panel\') === \'modify\') { item.click(); } }); // 填充修改表单 document.getElementById(\'modify-id\').value = id; findStudentForModify(); }); }); } // 删除学生功能 document.getElementById(\'delete-btn\').addEventListener(\'click\', () => { const id = document.getElementById(\'delete-id\').value.trim(); const messageDiv = document.getElementById(\'delete-message\'); if(!id) { showMessage(messageDiv, \'请输入学号\', \'error\'); return; } deleteStudent(id); }); function deleteStudent(id) { const messageDiv = document.getElementById(\'delete-message\'); const index = students.findIndex(student => student.id === id); if(index === -1) { showMessage(messageDiv, \'未找到该学号对应的学生信息\', \'error\'); return; } const studentName = students[index].name; students.splice(index, 1); saveToLocalStorage(); showMessage(messageDiv, `成功删除学生: ${studentName}`, \'success\'); document.getElementById(\'delete-id\').value = \'\'; // 如果当前在显示面板，刷新列表 if(document.getElementById(\'display-panel\').classList.contains(\'active\')) { displayStudents(); } } // 查找学生进行修改 document.getElementById(\'modify-id\').addEventListener(\'input\', findStudentForModify); function findStudentForModify() { const id = document.getElementById(\'modify-id\').value.trim(); const messageDiv = document.getElementById(\'modify-message\'); const modifyForm = document.getElementById(\'modify-form\'); if(!id) { modifyForm.style.display = \'none\'; return; } const student = students.find(s => s.id === id); if(!student) { showMessage(messageDiv, \'未找到该学号对应的学生信息\', \'error\'); modifyForm.style.display = \'none\'; return; } showMessage(messageDiv, `找到学生: ${student.name}，请修改以下信息`, \'info\'); modifyForm.style.display = \'block\'; // 填充表单（但不设置值，允许留空） document.getElementById(\'modify-name\').value = \'\'; document.getElementById(\'modify-age\').value = \'\'; document.getElementById(\'modify-grade\').selectedIndex = 0; } // 保存修改 document.getElementById(\'save-modify-btn\').addEventListener(\'click\', () => { const id = document.getElementById(\'modify-id\').value.trim(); const newName = document.getElementById(\'modify-name\').value.trim(); const newAge = document.getElementById(\'modify-age\').value.trim(); const newGrade = document.getElementById(\'modify-grade\').value; const messageDiv = document.getElementById(\'modify-message\'); const studentIndex = students.findIndex(s => s.id === id); if(studentIndex === -1) { showMessage(messageDiv, \'未找到该学生信息\', \'error\'); return; } // 更新信息（仅更新非空字段） if(newName) students[studentIndex].name = newName; if(newAge) students[studentIndex].age = newAge; if(newGrade) students[studentIndex].grade = newGrade; saveToLocalStorage(); showMessage(messageDiv, \'成功修改学生信息\', \'success\'); // 清空表单 document.getElementById(\'modify-id\').value = \'\'; document.getElementById(\'modify-form\').style.display = \'none\'; // 如果当前在显示面板，刷新列表 if(document.getElementById(\'display-panel\').classList.contains(\'active\')) { displayStudents(); } }); // 显示消息函数 function showMessage(element, message, type) { element.innerHTML = `<div class=\"message ${type}\"><i class=\"fas fa-${type === \'success\' ? \'check-circle\' : type === \'error\' ? \'exclamation-circle\' : \'info-circle\'}\"></i> ${message}</div>`; // 5秒后自动清除消息 setTimeout(() => { element.innerHTML = \'\'; }, 5000); } // 保存数据到localStorage function saveToLocalStorage() { localStorage.setItem(\'students\', JSON.stringify(students)); } // 初始化显示学生列表 displayStudents(); </script></body></html>解释
学生信息管理系统 - HTML实现
下面我将使用HTML、CSS和JavaScript实现一个完整的学生信息管理系统，满足所有需求功能。
系统功能说明
这个学生信息管理系统实现了所有需求功能：
学生信息添加
输入学号、姓名、年龄和年级
学号唯一性检查
添加成功/失败提示
学生信息显示
表格展示所有学生信息
空信息提示
支持行内操作（编辑/删除）
学生信息删除
通过学号删除学生
成功/失败提示
学生信息修改
通过学号查找学生
选择性修改（留空则不修改）
成功/失败提示
系统交互
清晰的左侧导航菜单
响应式设计（适配移动设备）
数据持久化（使用localStorage）
用户友好的消息提示
技术实现
数据结构：使用JavaScript数组存储学生对象
数据持久化：利用localStorage保存数据
UI设计：
现代化渐变背景
卡片式布局
响应式设计（适配移动设备）
交互动画效果
功能实现：
使用事件监听器处理用户交互
动态DOM操作更新界面
表单验证和错误处理
使用说明
复制完整代码到HTML文件
在浏览器中打开该文件
使用左侧菜单切换不同功能
所有数据将保存在浏览器本地存储中
