學生信息管理系統 - 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>學生信息管理系統 &copy; 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});// 保存到localStoragesaveToLocalStorage();// 顯示成功消息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);}// 保存數據到localStoragefunction saveToLocalStorage() {localStorage.setItem('students', JSON.stringify(students));}// 初始化顯示學生列表displayStudents();</script>
</body>
</html>