js實現一個簡單的學生管理系統


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>學生管理系統</h1>
    <p>學生姓名:<input type="text" id="name"></p>
    <p>學生年齡:<input type="text" id="age"></p>
    <p>學生性別:<input type="radio" name="sex" id="male" checked value="男">男<input type="radio" id="female" name="sex" value="女">女</p>
    <p>考試成績:<input type="text" id="score"></p>
    <button id="addstu">添加學生</button><br><br>
    <table id="stuInfo" border="" cellspacing="0" style="text-align: center">
    </table>    
    <script>
        let tab=document.getElementById("stuInfo")
        let addStu=document.getElementById("addstu");
        let name=document.getElementById("name");
        let age=document.getElementById("age");
        let score=document.getElementById("score");
        let sex=document.getElementsByName("sex");
        let index=null;//記錄修改時的下標值
    // //初始化數據先為null,之后會從localstorage里面獲取數據
    let stuInfo=null;
//渲染數組
let render=function(stuInfo){
    tab.innerHTML='';//首先重置table里面的內容,將其清空
    if(stuInfo.length!==0){
        let thead='<tr><td><b>學生姓名</b></td><td><b>學生年齡</b></td><td><b>學生性別</b></td><td><b>考試成績</b></td><td><b>操作</b></td></tr>'
        let tbody='';
        for(let i=0;i<stuInfo.length;i++){
            tbody+=`<tr>
            <td>${stuInfo[i].name}</td>
            <td>${stuInfo[i].age}</td>
            <td>${stuInfo[i].sex}</td>
            <td>${stuInfo[i].score}</td>
            <td><button onclick=editStu(${i})>修改</button><button onclick=delStu(${i})>刪除</button></td>
       </tr>`
        }
        tab.innerHTML+=thead+tbody;
    }
    else{
        tab.innerHTML='';
    }
}
//JSON和數組相互轉換函數,自動檢測,如果傳入的是JSON,那就轉為數組;如果傳入的是數組就轉為JSON
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(){
    //第一次localStorage里面沒有任何數據,所以我們做些初始化工作
    if(localStorage.stuInfo===undefined){
        let info={
            0:{'name':'小張','age':20,'sex':'男','score':100},
            1:{'name':'小劉','age':20,'sex':'男','score':100},
            2:{'name':'小陽','age':20,'sex':'男','score':100}
        }
        localStorage.stuInfo=JSON.stringify(info);//將數據轉換為字符串存入localStorage
        stuInfo=typeChange(info)
    }
    else{
        stuInfo=typeChange(JSON.parse(localStorage.stuInfo))
    }
    render(stuInfo);//渲染出數據
}   
//根據表單控件的值新建個學生對象 因為新增和修改都會用到,所以單獨提取出來
//該函數會返回建立好的學生對象
let makeNewStu=function(){
    //獲取單選框里的值
    let sexValue=null;
    for(let i=0;i<sex.length;i++){
         if(sex[i].checked===true){
             sexValue=sex[i].value;
         }
    }
    //構成對象
    let newStu={'name':name.value,'age':age.value,'sex':sexValue,'score':score.value};
    return newStu;
}
addStu.addEventListener('click',function(){
    if(addStu.innerHTML==='添加學生'){
        if(name.value===''||age.value===''||score.value===''){
            alert('信息不能為空');
        }
        else{
            let newStu=makeNewStu();//創建一個新的學生對象
            //將對象推入stuInfo數組
            stuInfo.push(newStu);
            //重新渲染
            render(stuInfo);
            //更新本地存儲的數據先轉換為JSON對象,然后再轉為字符串
            localStorage.stuInfo=JSON.stringify(typeChange(stuInfo));
            //清空文本框
            name.value="";
            age.value="";
            sex[0].checked=true;
            score.value="";
        }
    }
    else{
        //下一步就是獲取修改的信息
        let newInfo=makeNewStu();//直接調用該函數獲取表單的值即可
        stuInfo.splice(index,1,newInfo);//對數值進行修改
        render(stuInfo);//重新渲染
        //更新本地存儲數據 先轉換為JSON對象,然后轉換為字符串
        localStorage.stuInfo=JSON.stringify(typeChange(stuInfo));
        addStu.innerHTML='添加學生';
        //清空文本框
        name.value="";
        age.value="";
        score.value="";
        sex[0].checked=true;
    }
},false)
//如果使用3Q,可以直接使用on綁定事件,因為on默認自帶事件委托,無論是一開始有的元素,還是后面新增的元素,都會被綁定事件
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='確定修改';
    name.value=stuInfo[i].name;
    age.value=stuInfo[i].age;
   if(stuInfo[i].sex==='男'){
       sex[0].checked=true;
   }
   else{
       sex[1].checked=true
   }
   score.value=stuInfo[i].score;
   index=i
}
    </script>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM