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

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