学生后台管理系统（简易版）

 <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>