<!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>Document</title>
<style>
table{
border-collapse: collapse;
}
input{
border-radius: 20px;
border: 1px solid black;
}
</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="atuScore">考试成绩：</label><input type="text" name="stuScore" id="stuScore">
</div>
<button id="addStu">添加学生</button>
<table id="stuInfo" border="1" cellspacing="0"></table>
<script>
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");
// console.log(stuGender);
let index=null;//记录修改时的下标值
let stuInfo=null;//初始化数据先为null,之后会从localStorage里面获取数据
//渲染函数
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,那就转为数组;如果传入的是数组就转为350N
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){
//初始化数据之所以初始化为JS0N是为了方便转换为字符串存入localStorage
let info={
0:{"stuName":"谢杰","stuAge":18,"stuGender":"男","stuScore":100},
1:{"stuName":"雅静","stuAge":20,"stuGender":"男","stuScore":97},
2:{"stuName":"西子","stuAge":1,"stuGender":"男","stuScore":100}
}
localStorage.stuInfo=JSON.stringify(info);//将数据转换为字符串存入localstorage
stuInfo=typeChange(info);//将数据转换为数组方便进行操作
}
else{
stuInfo=typeChange(JSON.parse(localStorage.stuInfo));//进入此分支说明localStorage里面有东西， 直接从localStorage里面获取即可
}
render(stuInfo);// 渲染出数据
} //根据表单控件的值新建一个学生对象因为新增和修改都会用到，所以单独提取出来
//该函数会返回建立好的学生对象
let makeNewStu=function(){
//获取单选框的值
let stuGendervalue = [];
for(let i=0;i<stuGender.length;i++){
if(stuGender[i].checked === true){
console.log(stuGender[i].value);
stuGendervalue = stuGender[i].value;
console.log(stuGendervalue);
}
}
//构成对象
let newStu={"stuName":stuName.value,"stuAge":stuAge.value,"stuGender":stuGendervalue,"stuScore":stuScore.value};
console.log(newStu);
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);
//删除学生如果使用3Q,可以直接使用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>
