学生个人网页制作html_学生管理html页面

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

之前学习的时候做了一个简单的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>