代碼如下：
<!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>