学生后台管理系统(简易版)
Posted 13330893721zhy
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学生后台管理系统(简易版)相关的知识,希望对你有一定的参考价值。
<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 type="" id="addStu">添加学生</button> <tr> </tr> <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"); let index=null; let stuInfo =null; let render=function(stuInfo) tab.innerhtml=""; 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=""; 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() 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<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===‘‘||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; </script>
<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 type="" id="addStu">添加学生</button>
<tr>
</tr>
<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");
let index=null;
let stuInfo =null;
let render=function(stuInfo)
tab.innerHTML="";
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="";
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()
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<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===‘‘||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;
</script>
以上是关于学生后台管理系统(简易版)的主要内容,如果未能解决你的问题,请参考以下文章