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

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