利用html加css以及JavaScript写一个学生后台管理系统简单平台

之前学习的时候做了一个简单的crud，下面是效果图

html内容如下

<div class="conter">
    <div>
        <button id="btnAdd">添加</button>
        <button id="delAll" onclick="delAll()"> 全部删除</button>
    </div>
    <table border="1" cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbStudent">

        </tbody>

    </table>
    <div id="divAddStudent" class="hidden">
        <h2>学生信息</h2>
        <form action="#" id="addStudentForm">
            <p>学号：<input type="text" name="stuNo" id="stuNo"> </p>
            <p>姓名：<input type="text" name="tuName" id="stuName"> </p>
            <p>年龄：<input type="text" name="stuAge" id="stuAge"> </p>
            <p>班级：<input type="text" name="stuClass" id="stuClass"> </p>
            <p>    <button id="btnAddData" type="button">添加</button>  <button  id="btnCancel">取消</button></p>
        </form>
    </div>

</div>
<div id="zhezhao"  class="hidden"></div>

css内容

		*{
            margin: 0;
            padding: 0;
        }
        table{
            width: 100%;
        }
        table th ,table td{
            height: 30px;
            line-height: 30px;
        }
        table tbody tr:nth-child(2n){
            background-color: gainsboro;
        }
        table td{
            text-align: center;
        }
        .conter{
            width: 960px;
            margin: 30px auto;
        }
        button{
            padding: 5px 10px;
            margin: 5px;
            background-color: #00A398;
            color: white;
            border: none;
            border-radius: 15%;
            cursor: pointer;
        }
        #divAddStudent{
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 500px;
            height: 300px;
            margin: auto;
            background-color: white;
            box-sizing: border-box;
            padding: 20px 50px;
        }
        #divAddStudent h2{
            margin-bottom: 30px;
        }
        #divAddStudent p{
            margin-top: 10px;
        }
        #zhezhao{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        .hidden{
            display: none;
        }
        .show{
            display: block;
        }
        tbody:empty:before{
            content:"当前没有学生，快去添加吧"
        }

js内容

// 学生数据 stuNo：编号（唯一）stuName：姓名，stuAge：年龄，stuClass：班级名称
var studentArr=[  
       {"stuNo":"001","stuName":"红","stuAge":16,"stuClass":"218"},
        {"stuNo":"002","stuName":"小米","stuAge":15,"stuClass":"219"},
        {"stuNo":"003","stuName":"小明","stuAge":15,"stuClass":"218"},
        {"stuNo":"004","stuName":"小蓝","stuAge":16,"stuClass":"218"},
        {"stuNo":"005","stuName":"小紫","stuAge":15,"stuClass":"219"},
        {"stuNo":"006","stuName":"小青","stuAge":15,"stuClass":"218"},
        {"stuNo":"007","stuName":"小白","stuAge":16,"stuClass":"218"},
        {"stuNo":"008","stuName":"小黄","stuAge":15,"stuClass":"219"},
        {"stuNo":"009","stuName":"小黑","stuAge":15,"stuClass":"218"}
    ];
    var stuNoOper="";
    dataStudent();
    $("btnAdd").onclick=AddStudent;
    $("zhezhao").onclick=function () {
        model("divAddStudent","hidden");
    };
    $("btnCancel").onclick=function () {
        model("divAddStudent","hidden");
    };
    $("btnAddData").onclick=addStudentData;
    //添加学生
    function addStudentData() {
        var stuNo =$("stuNo").value;
        var stuName =$("stuName").value;
        var stuAge =$("stuAge").value;
        var stuClass =$("stuClass").value;
        if(stuNo==""){
            alert("学号不能为空");
            return;
        }else if (stuName==""){
            alert("姓名不能为空");
            return;
        }else if (stuAge==""){
            alert("年龄不能为空");
            return;
        }else if (stuClass==""){
            alert("班级不能为空");
            return;
        }
        if (stuNoOper==""){
            if (checkStudentNo(stuNo)){
                alert("当前学号已经存在");
                return;
            }
            var  obj= {"stuNo":stuNo,"stuName":stuName,"stuAge":stuAge,"stuClass":stuClass};
            studentArr.push(obj);
            if (confirm("添加成功，是否继续添加")){
                $("stuNo").value="";
                $("stuName").value="";
                $("stuAge").value="";
                $("stuClass").value="";
                dataStudent();
            }  else {
                model("divAddStudent","hidden");
                dataStudent();
            }
        }
        else {
            for(var i=0;i<studentArr.length;i++){
                if (studentArr[i].stuNo==stuNoOper){
                    studentArr[i].stuName=stuName;
                    studentArr[i].stuAge=stuAge;
                    studentArr[i].stuClass=stuClass;
                    alert("修改成功");
                    model("divAddStudent","hidden");
                    dataStudent();
                    break;
                }
            }
        }


    }
    //模态框方法
    function model(id,type) {
        type=type || "show";
        $("zhezhao").className=type;
        $(id).className=type;
    }
    //修改学生
    function  update(stuno) {
        console.log(123)
        var stuObj=getStudentBystuNO(stuno);
        if(stuObj){
            stuNoOper=stuno;
            model("divAddStudent");
            $("stuNo").value=stuObj.stuNo;
            $("stuName").value=stuObj.stuName;
            $("stuAge").value=stuObj.stuAge;
            $("stuClass").value=stuObj.stuClass;
        }else {
            alert("输入有误")
        }
    }
    //获取修改学生信息
    function getStudentBystuNO(stuno) {
        for(var i=0;i<studentArr.length;i++){
            if(studentArr[i].stuNo==stuno){
                return studentArr[i];
            }
        }
        return null;
    }
    //添加，接收用户数据
    function AddStudent() {
        stuNoOper="";
        model("divAddStudent");
    }
    //数据显示
    function dataStudent() {
        var tbstudent=$("tbStudent");
        tbstudent.innerHTML="";
        for(var i=0; i<studentArr.length;i++){
                tbstudent.innerHTML+=`<tr><td>${studentArr[i].stuNo}</td><td>${studentArr[i].stuName}</td><td>${studentArr[i].stuAge}</td><td>${studentArr[i].stuClass}</td> 
                <td><button onclick = 'del(${studentArr[i].stuNo})'>删除</button><button onclick = 'update(${studentArr[i].stuNo})'>修改</button></td></tr>`
        }
    }
    //删除
    function del(stuno) {
        if (confirm("确定要删除吗")){
            for (var i=0;i<studentArr.length;i++){
                if(studentArr[i].stuNo==stuno){
                    studentArr.splice(i,1);
                    alert("删除成功");
                    dataStudent();
                    break;
                }
            }
        }
    }
    //删除全部
    function delAll() {
        if (confirm("确定要删除吗")){
            studentArr=[];
            dataStudent();
        }
    }
    //验证学号
    function checkStudentNo(stuNo) {
        for( var i=0;i<studentArr.length;i++){
            if(studentArr[i].stuNo==stuNo){
                return true;
            }
        }
        return false;
    }
    //选择id
    function $(id) {
        return document.getElementById(id);
    }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        table{
            width: 100%;
        }
        table th ,table td{
            height: 30px;
            line-height: 30px;
        }
        table tbody tr:nth-child(2n){
            background-color: gainsboro;
        }
        table td{
            text-align: center;
        }
        .conter{
            width: 960px;
            margin: 30px auto;
        }
        button{
            padding: 5px 10px;
            margin: 5px;
            background-color: #00A398;
            color: white;
            border: none;
            border-radius: 15%;
            cursor: pointer;
        }
        #divAddStudent{
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 500px;
            height: 300px;
            margin: auto;
            background-color: white;
            box-sizing: border-box;
            padding: 20px 50px;
        }
        #divAddStudent h2{
            margin-bottom: 30px;
        }
        #divAddStudent p{
            margin-top: 10px;
        }
        #zhezhao{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        .hidden{
            display: none;
        }
        .show{
            display: block;
        }
        tbody:empty:before{
            content:"当前没有学生，快去添加吧"
        }

    </style>
</head>
<body>
<div class="conter">
    <div>
        <button id="btnAdd">添加</button>
        <button id="delAll" onclick="delAll()"> 全部删除</button>
    </div>
    <table border="1" cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbStudent">

        </tbody>

    </table>
    <div id="divAddStudent" class="hidden">
        <h2>学生信息</h2>
        <form action="#" id="addStudentForm">
            <p>学号：<input type="text" name="stuNo" id="stuNo"> </p>
            <p>姓名：<input type="text" name="tuName" id="stuName"> </p>
            <p>年龄：<input type="text" name="stuAge" id="stuAge"> </p>
            <p>班级：<input type="text" name="stuClass" id="stuClass"> </p>
            <p>    <button id="btnAddData" type="button">添加</button>  <button  id="btnCancel">取消</button></p>
        </form>
    </div>

</div>
<div id="zhezhao"  class="hidden"></div>
<script type="text/javascript">
    var studentArr=[  //数组
        {"stuNo":"001","stuName":"小红","stuAge":16,"stuClass":"218"},
        {"stuNo":"002","stuName":"小米","stuAge":15,"stuClass":"219"},
        {"stuNo":"003","stuName":"小明","stuAge":15,"stuClass":"218"},
        {"stuNo":"004","stuName":"小蓝","stuAge":16,"stuClass":"218"},
        {"stuNo":"005","stuName":"小紫","stuAge":15,"stuClass":"219"},
        {"stuNo":"006","stuName":"小青","stuAge":15,"stuClass":"218"},
        {"stuNo":"007","stuName":"小白","stuAge":16,"stuClass":"218"},
        {"stuNo":"008","stuName":"小黄","stuAge":15,"stuClass":"219"},
        {"stuNo":"009","stuName":"小黑","stuAge":15,"stuClass":"218"}
    ];
    var stuNoOper="";
    dataStudent();
    $("btnAdd").onclick=AddStudent;
    $("zhezhao").onclick=function () {
        model("divAddStudent","hidden");
    };
    $("btnCancel").onclick=function () {
        model("divAddStudent","hidden");
    };
    $("btnAddData").onclick=addStudentData;
    //添加学生
    function addStudentData() {
        var stuNo =$("stuNo").value;
        var stuName =$("stuName").value;
        var stuAge =$("stuAge").value;
        var stuClass =$("stuClass").value;
        if(stuNo==""){
            alert("学号不能为空");
            return;
        }else if (stuName==""){
            alert("姓名不能为空");
            return;
        }else if (stuAge==""){
            alert("年龄不能为空");
            return;
        }else if (stuClass==""){
            alert("班级不能为空");
            return;
        }
        if (stuNoOper==""){
            if (checkStudentNo(stuNo)){
                alert("当前学号已经存在");
                return;
            }
            var  obj= {"stuNo":stuNo,"stuName":stuName,"stuAge":stuAge,"stuClass":stuClass};
            studentArr.push(obj);
            if (confirm("添加成功，是否继续添加")){
                $("stuNo").value="";
                $("stuName").value="";
                $("stuAge").value="";
                $("stuClass").value="";
                dataStudent();
            }  else {
                model("divAddStudent","hidden");
                dataStudent();
            }
        }
        else {
            for(var i=0;i<studentArr.length;i++){
                if (studentArr[i].stuNo==stuNoOper){
                    studentArr[i].stuName=stuName;
                    studentArr[i].stuAge=stuAge;
                    studentArr[i].stuClass=stuClass;
                    alert("修改成功");
                    model("divAddStudent","hidden");
                    dataStudent();
                    break;
                }
            }
        }


    }
    //模态框方法
    function model(id,type) {
        type=type || "show";
        $("zhezhao").className=type;
        $(id).className=type;
    }
    //修改学生
    function  update(stuno) {
        console.log(123)
        var stuObj=getStudentBystuNO(stuno);
        if(stuObj){
            stuNoOper=stuno;
            model("divAddStudent");
            $("stuNo").value=stuObj.stuNo;
            $("stuName").value=stuObj.stuName;
            $("stuAge").value=stuObj.stuAge;
            $("stuClass").value=stuObj.stuClass;
        }else {
            alert("输入有误")
        }
    }
    //获取修改学生信息
    function getStudentBystuNO(stuno) {
        for(var i=0;i<studentArr.length;i++){
            if(studentArr[i].stuNo==stuno){
                return studentArr[i];
            }
        }
        return null;
    }
    //添加，接收用户数据
    function AddStudent() {
        stuNoOper="";
        model("divAddStudent");
    }
    //数据显示
    function dataStudent() {
        var tbstudent=$("tbStudent");
        tbstudent.innerHTML="";
        for(var i=0; i<studentArr.length;i++){
                tbstudent.innerHTML+=`<tr><td>${studentArr[i].stuNo}</td><td>${studentArr[i].stuName}</td><td>${studentArr[i].stuAge}</td><td>${studentArr[i].stuClass}</td> 
                <td><button onclick = 'del(${studentArr[i].stuNo})'>删除</button><button onclick = 'update(${studentArr[i].stuNo})'>修改</button></td></tr>`
        }
    }
    //删除
    function del(stuno) {
        if (confirm("确定要删除吗")){
            for (var i=0;i<studentArr.length;i++){
                if(studentArr[i].stuNo==stuno){
                    studentArr.splice(i,1);
                    alert("删除成功");
                    dataStudent();
                    break;
                }
            }
        }
    }
    //删除全部
    function delAll() {
        if (confirm("确定要删除吗")){
            studentArr=[];
            dataStudent();
        }
    }
    //验证学号
    function checkStudentNo(stuNo) {
        for( var i=0;i<studentArr.length;i++){
            if(studentArr[i].stuNo==stuNo){
                return true;
            }
        }
        return false;
    }
    //选择id
    function $(id) {
        return document.getElementById(id);
    }



</script>
</body>
</html>