<!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>
input[type="text"] {
border-radius: 20px;
outline: none;
padding-left: 10px;
border: 1px solid;
}
table {
margin-top: 10px;
text-align: center;
}
table button {
margin: 0 2px;
border-radius: 10px;
outline: none;
}
#addStu {
border-radius: 10px;
outline: none;
}
</style>
</head>
<body>
<h1>学生管理系统</h1>
<div>
<label for="stuName">学生姓名：</label>
<input type="text" name="stuName" id="stuName">
</div>
<div>
<label for="stuAge">学生年龄：</label>
<input type="text" name="stuAge" id="stuAge">
</div>
<div>
<label for="">学生性别：</label>
<label for="male">男</label>
<input type="radio" name="stuGender" id="male" checked value="男">
<label for="female">女</label>
<input type="radio" name="stuGender" id="female" value="女">
</div>
<div>
<label for="stuScore">考试成绩：</label>
<input type="text" name="stuScore" id="stuScore">
</div>
<button id="addStu">添加学生</button>
<table id="stuInfo" border="1" cellspacing="0"></table>
<script>
// 获取 DOM 元素
let tab = document.getElementById('stuInfo');
let addStu = document.getElementById('addStu');
let stuName = document.getElementById('stuName');
let stuAge = document.getElementById('stuAge');
let stuScore = document.getElementById('stuScore');
let stuGender = document.getElementsByName('stuGender');
let index = null; // 记录修改时的下标值
// 初始化数据先为null，之后会从localStorage里面获取数据
let stuInfo = null;
// 渲染函数
let render = function (stuInfo) {
tab.innerHTML = ''; // 首先重置table里面的内容，将其清空
if (stuInfo.length !== 0) {
let thead = '<tr><th>学生姓名</th><th>学生年龄</th><th>学生性别</th><th>考试成绩</th><th>操作</th></tr>';
let tbody = '';
for (let i = 0; i < stuInfo.length; i++) {
tbody += `<tr>
<td>${stuInfo[i].stuName}</td>
<td>${stuInfo[i].stuAge}</td>
<td>${stuInfo[i].stuGender}</td>
<td>${stuInfo[i].stuScore}</td>
<td><button onclick=editStu(${i})>修改</button><button onclick=delStu(${i})>删除</button></td>
</tr>`;
}
tab.innerHTML += thead + tbody;
}
else {
tab.innerHTML = '';
}
}
// JSON和数组相互转换函数，自动检测，如果传入的是JSON，那就转为数组；如果传入的是数组就转为JSON
let typeChange = function (a) {
if (Array.isArray(a)) {
let obj = {};
for (let key in a) {
obj[key] = a[key];
}
return obj;
}
else {
let arr = [];
for (let key in a) {
arr[key] = a[key];
}
return arr;
}
}
// 初次页面加载好时调用render函数
window.onload = function () {
// 第一次localStorage里面没有任何数据，所以我们做一些初始化工作
if (localStorage.stuInfo === undefined) {
// 初始化数据 之所以初始化为JSON是为了方便转换为字符串存入localStorage
let info = {
0: { 'stuName': '谢杰', 'stuAge': 18, 'stuGender': '男', 'stuScore': 100 },
1: { 'stuName': '雅静', 'stuAge': 20, 'stuGender': '女', 'stuScore': 97 },
2: { 'stuName': '希之', 'stuAge': 1, 'stuGender': '男', 'stuScore': 100 },
3: { 'stuName': '小张', 'stuAge': 25, 'stuGender': '男', 'stuScore': 93 },
4: { 'stuName': '老刘', 'stuAge': 20, 'stuGender': '女', 'stuScore': 88 }
}
localStorage.stuInfo = JSON.stringify(info); // 将数据转换为字符串存入localStorage
stuInfo = typeChange(info); // 将数据转换为数组方便进行操作
}
else {
// 进入此分支说明localStorage里面有东西，直接从localStorage里面获取即可
stuInfo = typeChange(JSON.parse(localStorage.stuInfo));
}
render(stuInfo); // 渲染出数据
}
// 根据表单控件的值新建一个学生对象 因为新增和修改都会用到，所以单独提取出来
// 该函数会返回建立好的学生对象
let makeNewStu = function () {
// 获取单选框的值
let stuGenderValue = null;
for (let i = 0; i < stuGender.length; i++) {
if (stuGender[i].checked === true) {
stuGenderValue = stuGender[i].value;
}
}
// 构成对象
let newStu = { 'stuName': stuName.value, 'stuAge': stuAge.value, 'stuGender': stuGenderValue, 'stuScore': stuScore.value };
return newStu;
}
addStu.addEventListener('click', function () {
if (addStu.innerHTML === '添加学生') {
if (stuName.value === '' || stuAge.value === '' || stuScore.value === '') {
alert('信息不能为空');
}
else {
let newStu = makeNewStu(); // 新建一个学生对象
// 将对象推入stuInfo数组
stuInfo.push(newStu);
// 重新渲染
render(stuInfo);
// 更新本地存储的数据 先转换为JSON对象，然后再转为字符串
localStorage.stuInfo = JSON.stringify(typeChange(stuInfo));
// 清空文本框
stuName.value = "";
stuAge.value = "";
stuGender[0].checked = true;
stuScore.value = "";
}
}
else {
// 下一步就是获取修改的信息
let newInfo = makeNewStu(); // 直接调用该函数获取表单的值即可
stuInfo.splice(index, 1, newInfo); // 对数组进行修改
render(stuInfo); // 重新渲染
// 更新本地存储的数据 先转换为JSON对象，然后再转为字符串
localStorage.stuInfo = JSON.stringify(typeChange(stuInfo));
addStu.innerHTML = '添加学生';
// 清空文本框
stuName.value = "";
stuAge.value = "";
stuScore.value = "";
stuGender[0].checked = true;
}
}, false);
// 删除学生 如果使用JQ，可以直接使用on绑定事件，因为on默认自带事件委托，无论是一开始有的元素，还是后面新增的元素，都会被绑定事件
// 这里由于我们使用的是原生JS，这些元素是后面生成的，所以只有通过事件写在HTML代码里面的形式来绑定事件
let delStu = function (i) {
if (window.confirm('确定是否要删除此学生?')) {
stuInfo.splice(i, 1); // 删除数组元素
render(stuInfo); // 重新进行渲染
// 更新本地存储的数据 先转换为JSON对象，然后再转为字符串
localStorage.stuInfo = JSON.stringify(typeChange(stuInfo));
}
}
// 修改学生，稍微麻烦点，具体的思路是先获取要修改的学生的信息，然后填入表单控件
// 当用户点击确认修改后，重新修改数组，最后进行渲染
let editStu = function (i) {
addStu.innerHTML = '确认修改';
// 获取到数据填入表单控件
stuName.value = stuInfo[i].stuName;
stuAge.value = stuInfo[i].stuAge;
if (stuInfo[i].stuGender === '男') {
stuGender[0].checked = true;
}
else {
stuGender[1].checked = true;
}
stuScore.value = stuInfo[i].stuScore;
index = i; // 记录要修改的元素的下标值是多少
}
</script>
</body>
</html>