代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>模拟学生管理系统</title>
<style>
.search {
display: flex;
}
#xiala {
margin-right: 10px;
}
.caozuo {
text-align: center;
}
.search {
margin-top: 20px;
}
.caozuo {
margin-top: 20px;
}
#theads {
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- 增加 -->
<div class="add">
<h1>学生管理</h1>
<h2>增加</h2>
<form action="">
<table>
<tr>
<td>姓名：</td>
<td>
<input type="text" id="addName">
</td>
</tr>
<tr>
<td>年龄：</td>
<td>
<input type="text" id="addAge">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="addGender" value="男">男
<input type="radio" name="addGender" value="女">女
</td>
</tr>
<tr>
<td>
<input type="button" value="增加" id="addBtn">
</td>
</tr>
</table>
</form>
</div>
<!-- 修改 -->
<div class="revise">
<h2>修改</h2>
<form action="">
<table>
<tr>
<td>姓名：</td>
<td>
<input type="text" id="updateName">
</td>
</tr>
<tr>
<td>年龄：</td>
<td>
<input type="text" id="updateAge">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="hidden" id="updateId">
<input type="radio" name="updateGender" value="男" id="man">男
<input type="radio" name="updateGender" value="女" id="female">女
</td>
</tr>
<tr>
<td>
<input type="button" value="修改" id="updateButton">
</td>
</tr>
</table>
</form>
</div>
<!-- 搜索 -->
<div class="search">
<select name="" id="searchType">
<option value="name">姓名</option>
<option value="age">年龄</option>
<option value="gender">性别</option>
</select>
<form action="">
<input type="text" id="searchText">
<input type="button" value="搜索" id="searchBtn">
</form>
</div>
<!-- 操作 -->
<div class="caozuo">
<form action="">
<table id="tables">
<thead id="theads">
<th>性别</th>
<th>姓名</th>
<th>年龄</th>
<th colspan="2" class="caozuo">操作</th>
</thead>
<tbody id="tbodys">
</tbody>
</table>
</form>
</div>
<script src="./util.js"></script>
<!--引入外部js文件,方便后面调用获取数据的方法-->
<script>
window.onload = function () {
// 1. 显示所有数据
function showAll(result) {
let tbodys = document.getElementById("tbodys");
let students = result || get("students", []); // 调用从localStorage中获取数据;有数据的话返回一个有数据的数组,没有数据返回一个空数组
let str = ""; // 声明一个空字符串,用于下面的字符串拼接
for (let i = 0; i < students.length; i++) {//将获取的数组遍历出数据
str += `<tr>
<td>${students[i].name}</td>
<td>${students[i].gender}</td>
<td>${students[i].age}</td>
<td>
<input type="button" value="修改" name="update" data-id =${students[i].id}>
<input type="button" name="remove" value="删除" data-id =${students[i].id}>
</td>
</tr>`; // 拼接字符串
}
tbodys.innerHTML = str; // 将拼接的字符串添加到tbodys标签里面
// 3. 删除学生数据
let removeBtns = document.querySelectorAll("#tbodys input[value=删除]");
for (let i = 0; i < removeBtns.length; i++) {
removeBtns[i].onclick = function () {
let students = get("students", []); // 获取所有的学生对象
for (let j = 0; j < students.length; j++) {
if (students[j].id == this.dataset.id) {
students.splice(j, 1);//删掉数组中的
save("students", students);//替换原来的数据,重新保存数据并显示出来
showAll();
return;
}
}
}
}
// 4. 修改学生数据 并显示在表单中
let updateId = document.getElementById("updateId");
let updateName = document.getElementById("updateName");
let updateAge = document.getElementById("updateAge");
let updateGender = document.getElementsByName("updateGender");
let updateBtns = document.querySelectorAll("#tbodys input[value=修改]");//获取修改所有的修改按钮,得到一个伪数组
// console.log(updateBtns);
for (let i = 0; i < updateBtns.length; i++) { //循环遍历伪数组
updateBtns[i].onclick = function () { //给每个修改按钮绑定点击事件
let students = get("students", []); // 获取所有的学生对象
for (let j = 0; j < students.length; j++) { //循环遍历学生对象
if (students[j].id == this.dataset.id) {
updateId.value = students[j].id;
updateName.value = students[j].name;
updateAge.value = students[j].age;
// document.querySelector(`[name=updateGender][value=${students[j]}.gender].checked=true`);
if (students[j].gender == "男") {
let man = document.getElementById("man");
man.checked = true;
} else if (students[j].gender == "女") {
let female = document.getElementById("female");
female.checked = true;
}
}
}
}
}
let updateButton = document.getElementById("updateButton");
// console.log(updateButton);
updateButton.onclick = function () { // 给修改按钮绑定点击事件
let students = get("students", []); // 获取所有的学生对象
// console.log(students);
for (let i = 0; i < students.length; i++) { // 遍历所有的学生对象
students[i].name = updateName.value; //
students[i].age = updateAge.value;
// students[i].gender = updateGender.value;
// let gender;
for (let j = 0; j < updateGender.length; j++) {
if (updateGender[j].checked) { //判断数据的特殊属性checked是否为true
students[i].gender = updateGender[j].value;
}
}
save("students", students);
showAll();
return;
}
}
}
showAll();// 调用显示所有数据函数
// 生成唯一的id值
function generateId() {
// 获取所有的学生对象
let students = get("students", []);
// 默认id值为0
let id = 0;
for (let i = 0; i < students.length; i++) {
if (students[i].id > id) {// 判断学生对象的id值与变量id的大小为真的话
id = students[i].id;
}
}
return ++id;
}
// 2. 增加学生数据
let addBtn = document.getElementById("addBtn");
addBtn.onclick = function () {
let id = generateId();
let addName = document.getElementById("addName");
let addAge = document.getElementById("addAge");
let addGender = document.getElementsByName("addGender");// 通过name属性获取元素节点,返回一个伪数组
let gender;
for (let i = 0; i < addGender.length; i++) {//遍历addGender数组
if (addGender[i].checked) { //判断数据的特殊属性checked是否为true
gender = addGender[i].value;
}
}
// console.log(gender);
// 获取所有的学生对象
let students = get("students", []);
students.push({
id: id,
name: addName.value,
age: addAge.value,
gender: gender
});
// 将添加的数据保存到localStorage
save("students", students);
showAll();
}
// 5. 搜索数据并显示
let searchType = document.getElementById("searchType"); // 获取下拉列表元素
let searchText = document.getElementById("searchText"); // 输入框内容
let searchBtn = document.getElementById("searchBtn"); // 搜索按钮
searchBtn.onclick = function () {
let type = searchType.value; // 姓名年龄性别的value值
let text = searchText.value; // 用户输入的value值
let students = get("students", []);
let result = [];
for (let i = 0; i < students.length; i++) { //循环遍历学生对象
if (students[i][type].search(text) >= 0) { // 模糊查询
result.push(students[i]);
}
}
showAll(result);
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/date150219-/p/9194896.html