js实现一个简单的学生管理系统

Posted dbda

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于js实现一个简单的学生管理系统的主要内容,如果未能解决你的问题,请参考以下文章

Java实现一个简单的学生信息管理系统

基于python和tkinter实现的一个简单的学生信息管理系统

用c语言实现一个简单的学生成绩管理系统,包括:学号,姓名,科目,成绩

js实现的学生管理系统

c语言实现的简单学生管理系统

python简单实现学生管理系统