学生管理

学生姓名:

学生年龄:

学生性别:

考试成绩:

添加学生

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;

}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐