html学生后台管理系统设计,学生后台管理系统(简易版)
学生管理学生姓名:学生年龄:学生性别:男女考试成绩:添加学生let tab=document.getElementById("stuInfo");let addStu=document.getElementById("addStu");let stuName=document.getElementById("stuName");let stuAge=document.getElementById(
学生管理
学生姓名:
学生年龄:
学生性别:
男
女
考试成绩:
添加学生
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;
let stuInfo=null;
let render=function(stuInfo){
tab.innerHTML="";if(stuInfo.length!==0){
let thead='
学生姓名学生年龄学生性别考试成绩操作';let tbody='';for(let i=0;i
tbody+=`
${stuInfo[i].stuName} ${stuInfo[i].stuAge} ${stuInfo[i].stuGender} ${stuInfo[i].stuScore} 修改删除 `;}
tab.innerHTML+=thead+tbody;
}else{
tab.innerHTML="";
}
}
let typeChange=function(a){if(Array.isArray(a)){
let obj={};for(let keyina){
obj[key]=a[key];
}returnobj;
}else{
let arr=[];for(let keyina){
arr[key]=a[key];
}returnarr;
}
}
window.οnlοad=function(){if(localStorage.stuInfo===undefined){
let info={0:{'stuName':'谢杰','stuAge':18,'stuGender':'男','stuScore':100},1:{'stuName':'雅静','stuAge':20,'stuGender':'女','stuScore':99},2:{'stuName':'希之','stuAge':23,'stuGender':'男','stuScore':89},
}
localStorage.stuInfo=JSON.stringify(info);
stuInfo=typeChange(info);
}else{
stuInfo=typeChange(JSON.parse(localStorage.stuInfo))
}
render(stuInfo);
}
let makeNewStu=function(){
let stuGenderValue=null;for(let i=0;i
stuGenderValue=stuGender[i].value;
}
}
let newStu={'stuName':stuName.value,'stuAge':stuAge.value,'stuGender':stuGenderValue,'stuScore':stuScore.value}returnnewStu;
}//添加学生
addStu.addEventListener("click",function(){if(addStu.innerHTML==="添加学生"){if(stuName.value===''||stuAge.value===''||stuGender===''){
alert("信息不能为空");
}else{
let newStu=makeNewStu();
stuInfo.push(newStu);
render(stuInfo);
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);
localStorage.stuInfo=JSON.stringify(typeChange(stuInfo));
addStu.innerHTML='添加学生';
stuName.value='';
stuAge.value='';
stuGender[0].checked=true;
stuScore.value='';
}
},false);//删除学生
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='确认修改';
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.stuScore;
index=i;
}
更多推荐
所有评论(0)