学生信息管理系统 - HTML实现增删改查
效果图
代码
java
<!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文件
在浏览器中打开该文件
使用左侧菜单切换不同功能
所有数据将保存在浏览器本地存储中