<!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>
</head>
<body>
<h1>學生管理系統</h1>
<p>學生姓名:<input type="text" id="name"></p>
<p>學生年齡:<input type="text" id="age"></p>
<p>學生性別:<input type="radio" name="sex" id="male" checked value="男">男<input type="radio" id="female" name="sex" value="女">女</p>
<p>考試成績:<input type="text" id="score"></p>
<button id="addstu">添加學生</button><br><br>
<table id="stuInfo" border="" cellspacing="0" style="text-align: center">
</table>
<script>
let tab=document.getElementById("stuInfo")
let addStu=document.getElementById("addstu");
let name=document.getElementById("name");
let age=document.getElementById("age");
let score=document.getElementById("score");
let sex=document.getElementsByName("sex");
let index=null;//記錄修改時的下標值
// //初始化數據先為null，之后會從localstorage里面獲取數據
let stuInfo=null;
//渲染數組
let render=function(stuInfo){
tab.innerHTML='';//首先重置table里面的內容，將其清空
if(stuInfo.length!==0){
let thead='<tr><td><b>學生姓名</b></td><td><b>學生年齡</b></td><td><b>學生性別</b></td><td><b>考試成績</b></td><td><b>操作</b></td></tr>'
let tbody='';
for(let i=0;i<stuInfo.length;i++){
tbody+=`<tr>
<td>${stuInfo[i].name}</td>
<td>${stuInfo[i].age}</td>
<td>${stuInfo[i].sex}</td>
<td>${stuInfo[i].score}</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;
}
}
window.onload=function(){
//第一次localStorage里面沒有任何數據,所以我們做些初始化工作
if(localStorage.stuInfo===undefined){
let info={
0:{'name':'小張','age':20,'sex':'男','score':100},
1:{'name':'小劉','age':20,'sex':'男','score':100},
2:{'name':'小陽','age':20,'sex':'男','score':100}
}
localStorage.stuInfo=JSON.stringify(info);//將數據轉換為字符串存入localStorage
stuInfo=typeChange(info)
}
else{
stuInfo=typeChange(JSON.parse(localStorage.stuInfo))
}
render(stuInfo);//渲染出數據
}
//根據表單控件的值新建個學生對象 因為新增和修改都會用到，所以單獨提取出來
//該函數會返回建立好的學生對象
let makeNewStu=function(){
//獲取單選框里的值
let sexValue=null;
for(let i=0;i<sex.length;i++){
if(sex[i].checked===true){
sexValue=sex[i].value;
}
}
//構成對象
let newStu={'name':name.value,'age':age.value,'sex':sexValue,'score':score.value};
return newStu;
}
addStu.addEventListener('click',function(){
if(addStu.innerHTML==='添加學生'){
if(name.value===''||age.value===''||score.value===''){
alert('信息不能為空');
}
else{
let newStu=makeNewStu();//創建一個新的學生對象
//將對象推入stuInfo數組
stuInfo.push(newStu);
//重新渲染
render(stuInfo);
//更新本地存儲的數據先轉換為JSON對象，然后再轉為字符串
localStorage.stuInfo=JSON.stringify(typeChange(stuInfo));
//清空文本框
name.value="";
age.value="";
sex[0].checked=true;
score.value="";
}
}
else{
//下一步就是獲取修改的信息
let newInfo=makeNewStu();//直接調用該函數獲取表單的值即可
stuInfo.splice(index,1,newInfo);//對數值進行修改
render(stuInfo);//重新渲染
//更新本地存儲數據 先轉換為JSON對象，然后轉換為字符串
localStorage.stuInfo=JSON.stringify(typeChange(stuInfo));
addStu.innerHTML='添加學生';
//清空文本框
name.value="";
age.value="";
score.value="";
sex[0].checked=true;
}
},false)
//如果使用3Q,可以直接使用on綁定事件，因為on默認自帶事件委托，無論是一開始有的元素，還是后面新增的元素，都會被綁定事件
let delStu=function(i){
if(window.confirm('確定是否刪除此學生')){
stuInfo.splice(i,1);//刪除數組元素
render(stuInfo);//重新渲染
localStorage.stuInfo=JSON.stringify(typeChange(stuInfo));
}
}
let editStu=function(i){
addStu.innerHTML='確定修改';
name.value=stuInfo[i].name;
age.value=stuInfo[i].age;
if(stuInfo[i].sex==='男'){
sex[0].checked=true;
}
else{
sex[1].checked=true
}
score.value=stuInfo[i].score;
index=i
}
</script>
</body>
</html>