<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 οnclick=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 οnclick=editStu(
${
i
}
)>修改</button><button οnclick=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
>