标签：lse sele for his 获取 fun pat NPU func
<!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>
td {
text-align: center;
}
</style>
</head>
<body>
<h1>学生管理系统</h1>
<!--增加 -->
<div>
<form action="">
<h2>增加</h2>
<div class="input-wrap">
<label for="name">姓名：</label>
<input type="text" id="name">
</div>
<div class="input-wrap">
<label for="age">年龄：</label>
<input type="text" id="age">
</div>
<div class="input-wrap">
<label for="sex">性别：</label>
<input type="radio" name=‘sex‘ id="addMale" value="男">男
<input type="radio" name=‘sex‘ id="addFemale" value="女">女
</div>
<button id=‘add‘>增加</button>
</form>
</div>
<div>
<h2>修改</h2>
<div class="input-wrap">
<label for="name">姓名：</label>
<input type="text" id="xgName">
</div>
<div class="input-wrap">
<label for="age">年龄：</label>
<input type="text" id="xgAge">
</div>
<div class="input-wrap">
<label for="sex">性别：</label>
<input type="radio" name=‘gender‘ class=‘xgGender‘ value="男">男
<input type="radio" name=‘gender‘ class=‘xgGender‘ value="女">女
</div>
<button id=‘xgBtn‘>修改</button>
</div>
<div>
<select name="student" id="select">
<option value="name" selected>姓名</option>
<option value="gender">性别</option>
<option value="age">年龄</option>
</select>
<input type="text" id=‘searchInput‘>
<button id=‘searchBtn‘>搜索</button>
<div id=‘neirong‘>
</div>
</div>
<table>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tbody id=‘tbody‘></tbody>
</table>
<script src="../../函数库/util.js"></script>
<script>
let tbody = document.getElementById(‘tbody‘);
let option = document.querySelectorAll(‘#select option‘);
show();
//增加
let add = document.getElementById(‘add‘);
add.onclick = function () {
let addMale = document.getElementById(‘addMale‘);
let addFemale = document.getElementById(‘addFemale‘);
let name = document.getElementById(‘name‘);
let age = document.getElementById(‘age‘);
let id = maxId();
let students = get(‘students‘, []);
let gender;
if (addMale.checked) {
gender = addMale.value;
} else if (addFemale.checked) {
gender = addFemale.value;
} else {
gender = ‘‘;
}
if (name.value && age.value && gender) {
students.push({
id: id,
name: name.value,
gender: gender,
age: age.value
});
save(‘students‘, students);
} else {
alert(‘请填写完所有资料再进行增加‘);
}
show();
}
//遍历
function show(studentArr) {
let tbody = document.getElementById(‘tbody‘);
let students = studentArr || get(‘students‘, []);
let str = ‘‘;
for (let i = 0; i < students.length; i++) {
str += `<tr>
<td>${students[i].id}</td>
<td>${students[i].name}</td>
<td>${students[i].gender}</td>
<td>${students[i].age}</td>
<td><input type="button" data-id=${students[i].id} value=‘修改‘></td>
<td><input type="button" data-id=${students[i].id} value=‘删除‘></td>
</tr>`
}
tbody.innerHTML = str;
remove();
display();
searchFn();
}
//获取id
function maxId() {
let id = 0;
let students = get(‘students‘, []);
for (let i = 0; i < students.length; i++) {
if (students[i].id > id) {
id = students[i].id;
}
}
++id;
return id;
}
// 删除
function remove() {
let deleteBtn = document.querySelectorAll(‘#tbody input[value=删除]‘);
for (let i = 0; i < deleteBtn.length; i++) {
let students = get(‘students‘, []);
deleteBtn[i].onclick = function () {
for (let j = 0; j < students.length; j++) {
if (students[j].id == this.dataset.id) {
students.splice(j, 1);
save(‘students‘, students);
show();
return;
}
}
}
}
}
//在修改的那一栏中显示相应信息和修改
function display() {
let xgName = document.getElementById(‘xgName‘);
let xgAge = document.getElementById(‘xgAge‘);
let xgGender = document.querySelectorAll(‘.xgGender‘);
let students = get(‘students‘, []);
let deleteBtn = document.querySelectorAll(‘#tbody input[value=修改]‘);
for (let i = 0; i < deleteBtn.length; i++) {
deleteBtn[i].onclick = function () {
for (let j = 0; j < students.length; j++) {
if (students[j].id == this.dataset.id) {
xgName.value = students[j].name;
xgAge.value = students[j].age;
document.querySelector(`[name=gender][value=${students[j].gender}]`).checked = true;
for (let k = 0; k < xgGender.length; k++) {
if (xgGender[k].value == students[j].gender) {
xgGender[k].checked = true;
xgBtn.onclick = function () {
let gender;
for (let h = 0; h < xgGender.length; h++) {
if (xgGender[h].checked) {
gender = xgGender[h].value;
}
}
students[j].name = xgName.value;
students[j].gender = gender;
students[j].age = xgAge.value;
save(‘students‘, students);
show();
xgName.value = ‘‘;
xgAge.value = ‘‘;
xgGender[0].checked = false;
xgGender[1].checked = false;
return;
}
}
}
}
}
}
}
}
//搜索
function searchFn() {
let searchBtn = document.getElementById(‘searchBtn‘);
let searchInput = document.getElementById(‘searchInput‘);
let neirong = document.getElementById(‘neirong‘);
let select = document.getElementById(‘select‘);
searchBtn.onclick = function () {
let change = select.value;
let value = searchInput.value;
let students = get(‘students‘, []);
let studentArr = [];
for (let i = 0; i < students.length; i++) {
if (students[i][change].search(value) >= 0) {
studentArr.push(students[i]);
}
}
show(studentArr);
}
}
</script>
</body>
</html>
学生管理系统网页版
标签：lse sele for his 获取 fun pat NPU func
原文地址：https://www.cnblogs.com/yehongrun/p/9190818.html
