话不多说，直接上代码，有用麻烦点个免费的赞赞。超级好用版。
目录结构如该图所示，只要将文件命名成图上三种。代码即可正常运行。分别有三个文件，一个是app.js，放学生信息删除添加查询主要逻辑代码。login.html放登录页面样式以及相关逻辑。studentList.html 放置学生管理的页面。
运行效果图：
代码：
app.js
let temData = {
studentList: [{
id: '1',
name: "爱吃饭的小恐龙",
age: "20",
gender: "男",
},
{
id: '2',
name: "付渐渐",
age: "19",
gender: "男",
}]
}
$(document).ready(function () {
// 执行页面加载时获取学生列表
getStudentList();
//退出登录
$('.loginOut').click(function () {
loginOut();
});
// 监听添加学生信息表单提交事件
$('.box1').submit(function (event) {
event.preventDefault();
addStudentInfo();
});
// 监听修改学生信息表单提交事件
$('.box2').submit(function (event) {
event.preventDefault();
confimEdit()
});
// 监听编辑按钮点击事件
$('table').on('click', '.btn-primary', function () {
var id = $(this).closest('tr').find('td:eq(0)').text();
editStudentInfo(id);
});
// 监听删除按钮点击事件
$('table').on('click', '.btn-danger', function () {
var id = $(this).closest('tr').find('td:eq(0)').text();
deleteStudentInfo(id);
});
//监听清空学生表点击事件
$('.tool').click(function () {
clearStudent();
});
//监听搜索事件
$('#search-button').on('click', function () {
const keyword = $('#search-input').val();
performSearch(keyword);
});
});
// 获取学生列表
function getStudentList() {
const dataString = localStorage.getItem('myData'); // 从localStorage中获取字符串数据
const data = JSON.parse(dataString); // 将字符串转换为原始的JavaScript对象
if (data) {
temData = data
}
displayStudentList(temData.studentList);
}
// 显示学生列表
function displayStudentList(studentList) {
$('table tbody').empty();
studentList.forEach(function (student) {
$('table tbody').append(`
<tr>
<td>${student.id}</td>
<td>${student.name}</td>
<td>${student.age}</td>
<td>${student.gender}</td>
<td>
<button type="button" class="btn btn-sm btn-primary">修改</button>
<button type="button" class="btn btn-sm btn-danger">删除</button>
</td>
</tr>
`);
});
}
// 添加学生信息
function addStudentInfo() {
var student = {
id: $('#id').val(),
name: $('#name').val(),
age: $('#age').val(),
gender: $('#gender').val()
};
//做数据安全判断
if (!student.id) {
alert('ID为空');
return;
} else if (!student.name) {
alert('姓名为空');
return;
} else if (!student.age) {
alert('年龄为空');
return;
} else if (!student.gender) {
alert('性别为空');
return;
} else if (temData.studentList.findIndex(n => n.id == student.id) != -1) {
alert('学号已经存在！');
return;
}
temData.studentList.push(student)
localStorage.setItem('myData', JSON.stringify(temData));
alert('成功添加学生信息！');
getStudentList();
$('.box1 form')[0].reset();
}
//传入初值函数
function setData(data) {
$('#newId').val(data.id);
$('#newName').val(data.name);
$('#newAge').val(data.age);
$('#newGender').val(data.gender);
}
//搜索逻辑
function performSearch(keyword) {
if (!keyword) {
getStudentList();
} else {
let student = temData.studentList.find(student => student.id === keyword);
$('table tbody').empty();
$('table tbody').append(`
<tr>
<td>${student.id}</td>
<td>${student.name}</td>
<td>${student.age}</td>
<td>${student.gender}</td>
<td>
<button type="button" class="btn btn-sm btn-primary">修改</button>
<button type="button" class="btn btn-sm btn-danger">删除</button>
</td>
</tr>
`);
}
}
// 编辑学生信息
let needEditIndex = -1;
function editStudentInfo(id) {
needEditIndex = temData.studentList.findIndex(student => student.id === id);
$('.box2').css('visibility', 'visible')
setData(temData.studentList[needEditIndex])
}
//确认修改
function confimEdit() {
var student = {
id: $('#newId').val(),
name: $('#newName').val(),
age: $('#newAge').val(),
gender: $('#newGender').val()
};
if (!student.id) {
alert('ID为空');
return;
} else if (!student.name) {
alert('姓名为空');
return;
} else if (!student.age) {
alert('年龄为空');
return;
} else if (!student.gender) {
alert('性别为空');
return;
}
temData.studentList[needEditIndex] = student;
localStorage.setItem('myData', JSON.stringify(temData));
alert('成功修改学生信息！');
getStudentList();
$('.box2').css('visibility', 'hidden');
}
// 删除学生信息
function deleteStudentInfo(id) {
const index = temData.studentList.findIndex(student => student.id == id);
if (index !== -1) {
temData.studentList.splice(index, 1);
}
localStorage.setItem('myData', JSON.stringify(temData));
alert('成功删除该学生！');
getStudentList();
}
//清空数据
function clearStudent() {
localStorage.removeItem('myData'); // 删除名为“myData”的数据
alert('数据清除成功！');
location.reload();
}
//退出登录
function loginOut() {
sessionStorage.setItem("state", JSON.stringify(false));
window.location.href = "login.html";
}login页面
<!DOCTYPE html>
<html>
<head>
<title>管理系统登录</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
}
#login-wrapper {
height: 520px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
margin-top: 20px;
}
form {
width: 500px;
margin: 0 auto;
background-color: #ff805b;
padding: 80px;
padding-left: 80px;
padding-right: 80px;
border-radius: 5px;
box-shadow: 0px 0px 5px #888;
}
label {
display: block;
margin-bottom: 10px;
color: #f23b24;
}
input[type="text"],
input[type="password"] {
padding: 15px;
border: none;
outline: none;
width: 100%;
margin-bottom: 30px;
border-radius: 5px;
box-sizing: border-box;
box-shadow: 0px 0px 5px #ccc;
}
.loginBtn {
text-align: center;
background-color: #224b8f;
color: #fff;
padding: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
font-size: 16px;
margin-top: 30px;
}
</style>
</head>
<body>
<h1>学生管理系的登录</h1>
<div class="header">
<div id="login-wrapper">
<h1>请登录</h1>
<form action="#" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" />
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" />
<div class="loginBtn">登录</div>
</form>
</div>
</div>
</body>
<script>
let userData = {
userList: [
{
username: "admin",
password: "123456",
},
{
username: "jianjian",
password: "12921xin",
},
],
};
let state = false;
sessionStorage.setItem("state", state);
let usernameInput = document.querySelector("#username");
let passwordInput = document.querySelector("#password");
const loginBtn = document.querySelector(".loginBtn");
loginBtn.addEventListener("click", () => {
if (!usernameInput.value.trim() || !passwordInput.value.trim()) {
alert("请输入用户名和密码");
return;
}
userData.userList.forEach((user) => {
if (user.username === usernameInput.value) {
if (user.password === passwordInput.value) {
state = true;
sessionStorage.setItem("state", JSON.stringify(state));
alert("登录成功");
window.location.href = "studentList.html";
return;
}
}
});
if (JSON.parse(sessionStorage.getItem("state")) === false) {
alert("用户名或密码错误，请重新输入");
passwordInput.value = "";
usernameInput.value = "";
}
});
</script>
</html>studentList.html页面
<!DOCTYPE html>
<html>
<head>
<title>管理页面</title>
<meta charset="utf-8" />
<script>
if (!sessionStorage.getItem("state") || JSON.parse(sessionStorage.getItem("state")) === false) {
alert("您未登录，无权访问！！")
window.location.href = "login.html";
}
</script>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Bootstrap样式库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" />
<!-- 引入Bootstrap JS库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<style>
.input-box-wrpper {
display: flex;
justify-content: space-between;
}
.input-box-wrpper .box1,
.box2 {
width: 50%;
box-sizing: border-box;
padding: 0 40px;
}
.input-box-wrpper .box2 {
visibility: hidden;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="text-align: center">
<div class="container-fluid">
<a class="navbar-brand" href="#">学生管理系统</a>
</div>
<div class="container-fluid loginOut">
<a class="navbar-brand" href="#">退出登录</a>
</div>
</nav>
<div class="container my-4">
<h2><i style="padding-right: 100px">学生列表</i> <input type="text" id="search-input" placeholder="请输入搜索得学号" /> <button id="search-button">搜索</button></h2>
<table class="table table-striped">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="input-box-wrpper">
<div class="box1">
<h2>添加学生信息</h2>
<form>
<div class="mb-3">
<label for="id" class="form-label">学号</label>
<input type="text" class="form-control" id="id" name="id" />
</div>
<div class="mb-3">
<label for="name" class="form-label">姓名</label>
<input type="text" class="form-control" id="name" name="name" />
</div>
<div class="mb-3">
<label for="age" class="form-label">年龄</label>
<input type="number" class="form-control" id="age" name="age" />
</div>
<div class="mb-3">
<label for="gender" class="form-label">性别</label>
<select class="form-select" aria-label="Default select example" id="gender" name="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<button type="submit" class="btn btn-primary">提交</button>
<button type="button" class="btn btn-primary tool" style="float: right">数据重置</button>
</form>
</div>
<div class="box2">
<h2>修改学生信息</h2>
<form>
<div class="mb-3">
<label for="id" class="form-label">学号</label>
<input type="text" class="form-control" id="newId" name="id" disabled />
</div>
<div class="mb-3">
<label for="name" class="form-label">姓名</label>
<input type="text" class="form-control" id="newName" name="name" />
</div>
<div class="mb-3">
<label for="age" class="form-label">年龄</label>
<input type="number" class="form-control" id="newAge" name="age" />
</div>
<div class="mb-3">
<label for="gender" class="form-label">性别</label>
<select class="form-select" aria-label="Default select example" id="newGender" name="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<button type="submit" class="btn btn-primary">确认修改</button>
</form>
</div>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
完活，很好的代码。记得点赞点赞点赞👍
文章出处登录后可见！
已经登录？立即刷新
