首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript+HTML实现学生信息管理系统

Posted in Javascript onApril 20, 2021

一、前言

用数组来存储所有学生对象的信息，实现了双向更新，初始时（数组内的对象信息“填充界面”），后面的界面操作可以更新数组内对象的信息（数量和本身数据域信息）。

优点：JQuery代码处理的许多细节较好。

使用HTML5的pattern+正则表达式，实现表单验证以及相应提示。

缺点：后台删除学生对象的信息代码处理效率较低（“假”删除：移动学生对象索引的位置+变换数组长度）。

CSS部分——界面的缩放存在问题。（没打算走前端/暂时懒得修改）。.

部分代码可以更好的处理已达到复用的目的，未处理。

二、效果图

JavaScript+HTML实现学生信息管理系统

三、代码

没有删去写代码过程中做改进之前的代码，看上去代码有点长（保留了写代码的思考过程）

删去注释了的代码以及一些不必要的内容，代码也不是太长。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Information Management System</title>
    <script src="../../../JQuery/JQuery.js"></script>
    <link rel="stylesheet" href="../studentInformationManagementSystemCss/studentInformationManagementSystem.css" rel="external nofollow" >
    <script src="../studentInformationManagementSystemJs/studentInformationManagementSystem.js"></script>
</head>
<body>
<div>
    <header>
        <hr/>
        <h1>学生信息管理系统</h1>
        <hr/>
    </header>
    <main>
        <div>
            <div id="adbt">
                <button class="gre" id="add">新增</button>
                <button class="red" id="delete">删除</button>
            </div>
            <table>
                <tbody>
                <tr id="thead">
                    <td><input type="checkbox"></td>
                    <td>序号</td>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>学院</td>
                    <td>专业</td>
                    <td>年级</td>
                    <td>班级</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
                <!--<tr>
                    <td name="abc"><input type="checkbox"></td>
                    <td>1</td>
                    <td>11503080201</td>
                    <td>张三</td>
                    <td>计算机科学与工程学院</td>
                    <td>软件工程</td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2</td>
                    <td>11503080202</td>
                    <td>李四</td>
                    <td>会计学院</td>
                    <td>会计学</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>3</td>
                    <td>11503080203</td>
                    <td>王二</td>
                    <td>理学院</td>
                    <td>数学</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>4</td>
                    <td>11503080204</td>
                    <td>张三</td>
                    <td>计算机科学与工程学院</td>
                    <td>软件工程</td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>5</td>
                    <td>11503080205</td>
                    <td>李四</td>
                    <td>会计学院</td>
                    <td>会计学</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>6</td>
                    <td>11503080206</td>
                    <td>王二</td>
                    <td>理学院</td>
                    <td>数学</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>7</td>
                    <td>11503080207</td>
                    <td>张三</td>
                    <td>计算机科学与工程学院</td>
                    <td>软件工程</td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>8</td>
                    <td>11503080208</td>
                    <td>李四</td>
                    <td>会计学院</td>
                    <td>会计学</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>9</td>
                    <td>11503080209</td>
                    <td>王二</td>
                    <td>理学院</td>
                    <td>数学</td>
                    <td>2015</td>
                    <td>1</td>
                    <td>19</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>10</td>
                    <td>11503080210</td>
                    <td>张三</td>
                    <td>计算机科学与工程学院</td>
                    <td>软件工程</td>
                    <td>2015</td>
                    <td>2</td>
                    <td>21</td>
                    <td><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="check">查看</a> <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="modify">修改</a></td>
                </tr>-->
                </tbody>
            </table>
            <div id="navigate">
                <p>第<span id="pgn"></span>页,共<span id="en"></span>条 (每页最多显示10条)</p><!--Number of entries-->
                <div id="tpbt">
                    <button class="gre" id="lastpage">上一页</button>
                    <button class="red" id="nextpage">下一页</button>
                </div>
            </div>
        </div>
    </main>
</div>
<div id="sbg"></div><!--增删改查时的阴影背景-->
<div class="achaesi" id="asi">
<!--    <form action="" method="post">-->
    <h2>新增学生信息</h2>
    <div class="ifm">
        <div><label for="assn">学号</label> <input id="assn" type="text" placeholder="11503080201" required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('请输入11位的数字组合')"></div>
        <div><label for="asn">姓名</label> <input id="asn" type="text" placeholder="雷军" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的姓名')"></div>
        <div><label for="asac">学院</label> <input id="asac" type="text" placeholder="两江人工智能学院" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的学院名')"></div>
        <div><label for="asm">专业</label> <input id="asm" type="text" placeholder="软件工程" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的专业名')"></div>
        <div><label for="asg">年级</label> <input id="asg" type="text" placeholder="2015" required="required" max="2020" maxlength="4" pattern="^[0-9]{4}$" oninvalid="setCustomValidity('请输入正确的年级')"></div>
        <div><label for="asc">班级</label> <input id="asc" type="text" placeholder="1" required="required" maxlength="1"></div>
        <div><label for="asag">年龄</label> <input id="asag" type="number" placeholder="20" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('请输入正确的年龄')"></div>
    </div>
    <hr/>
    <div class="scbt">
        <button type="submit" id="submit">提交</button>
        <button class="cancel">取消</button>
    </div>
<!--    </form>-->
</div>
<div class="achaesi" id="chasi">
<!--    <form action="" method="post">-->
    <h2>修改学生信息</h2>
    <div class="ifm">
        <div><label for="chassn">学号</label> <input id="chassn" type="text" readonly required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('请输入11位的数字组合')"></div>
        <div><label for="chasn">姓名</label> <input id="chasn" type="text" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的姓名')"></div>
        <div><label for="chasac">学院</label> <input id="chasac" type="text" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的学院名')"></div>
        <div><label for="chasm">专业</label> <input id="chasm" type="text" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的专业名')"></div>
        <div><label for="chasg">年级</label> <input id="chasg" type="text" required="required" max="2020" maxlength="4" pattern=^[0-9]{4}$" oninvalid="setCustomValidity('请输入正确的年级')"></div>
        <div><label for="chasc">班级</label> <input id="chasc" type="text" required="required" maxlength="1"></div>
        <div><label for="chasag">年龄</label> <input id="chasag" type="text" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('请输入正确的年龄')"></div>
    </div>
    <hr/>
    <div class="scbt">
        <button type="submit" id="save">保存</button>
        <button class="cancel">取消</button>
    </div>
<!--    </form>-->
</div>
<div class="achaesi" id="chesi">
    <h2>查看学生信息</h2>
    <div class="ifm">
        <div><label for="chessn">学号</label> <input type="text" readonly id="chessn"></div>
        <div><label for="chesn">姓名</label> <input type="text" readonly id="chesn"></div>
        <div><label for="chesac">学院</label> <input type="text" readonly id="chesac"></div>
        <div><label for="chesm">专业</label> <input type="text" readonly id="chesm"></div>
        <div><label for="chesg">年级</label> <input type="text" readonly id="chesg"></div>
        <div><label for="chesc">班级</label> <input type="text" readonly id="chesc"></div>
        <div><label for="chesag">年龄</label> <input type="text" readonly id="chesag"></div>
    </div>
    <hr/>
    <div class="scbt">
        <button class="cancel">取消</button>
    </div>
</div>
</body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: red;
}
.sbg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.4;
  z-index: 1;
}
body {
  background-color: #f0ece9;
}
header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
header h1 {
  color: #9a9897;
}
header hr {
  margin: 20px 20px 0;
  background-color: #bc9470;
  border: 2px solid #bc9470;
  width: 30%;
  height: 0;
}
main #adbt {
  margin-left: 70px;
}
main button {
  margin: 20px 5px;
  width: 85px;
  height: 40px;
  color: white;
}
main button.gre {
  background-color: #5cb85c;
}
main button.red {
  background-color: #d9534f;
}
main #navigate {
  padding: 0 70px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
main #navigate p {
  margin-top: 30px;
}
table {
  margin: 0 auto;
  width: 90%;
  text-align: center;
  border-spacing: 0;
}
table tbody tr:first-of-type {
  background-color: #dadee1 !important;
  height: 60px;
}
table tbody tr {
  height: 45px;
}
table tbody tr:nth-child(odd) {
  background-color: #eef1f8;
}
table tbody tr:nth-child(even) {
  background-color: #ffffff;
}
table tbody tr:not([id=thead]):hover {
  cursor: pointer;
  background-color: #e9e9e9;
}
.achaesi {
  display: none;
  position: absolute;
  top: 20%;
  left: 34%;
  background-color: white;
  z-index: 2;
  width: 500px;
  height: 420px;
}
.achaesi h2 {
  padding: 5px 20px;
  font-size: large;
  background-color: #555555;
  color: white;
}
.achaesi .ifm {
  width: 300px;
  margin: 10px auto;
  display: flex;
  flex-flow: column nowrap;
}
.achaesi .ifm div {
  margin: 10px;
}
.achaesi .ifm div input {
  width: 220px;
  height: 20px;
}
.achaesi .scbt {
  float: right;
  margin-top: 6px;
  margin-right: 30px;
}
.achaesi .scbt button:first-of-type {
  width: 85px;
  height: 36px;
  background-color: #5cb85c;
}
.achaesi .scbt button:last-of-type {
  width: 85px;
  height: 36px;
  background-color: white;
}
/*# sourceMappingURL=studentInformationManagementSystem.css.map */

JS:

$(function () {
    let students = [{//初始界面数据
        schoolNumber: "11503080201",
        name: "雷军",//my idol
        academy: "两江人工智能学院",
        major: "软件工程",
        grade: 2019,
        class: 2,
        age: 20,
    }, {
        schoolNumber: "11503080202",
        name: "张三",
        academy: "计算机工程与技术学院",
        major: "计算机科学与技术",
        grade: 2019,
        class: 1,
        age: 19,
    }, {
        schoolNumber: "11503080203",
        name: "李四",
        academy: "会计学院",
        major: "会计学",
        grade: 2018,
        class: 3,
        age: 19,
    }, {
        schoolNumber: "11503080204",
        name: "王五",
        academy: "理学院",
        major: "应用物理",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080204",
        name: "赵六",
        academy: "会计学院",
        major: "金融学",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080202",
        name: "张三",
        academy: "计算机工程与技术学院",
        major: "计算机科学与技术",
        grade: 2019,
        class: 1,
        age: 19,
    }, {
        schoolNumber: "11503080203",
        name: "李四",
        academy: "会计学院",
        major: "会计学",
        grade: 2018,
        class: 3,
        age: 19,
    }, {
        schoolNumber: "11503080204",
        name: "王五",
        academy: "理学院",
        major: "应用物理",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080204",
        name: "赵六",
        academy: "会计学院",
        major: "金融学",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080202",
        name: "张三",
        academy: "计算机工程与技术学院",
        major: "计算机科学与技术",
        grade: 2019,
        class: 1,
        age: 19,
    }, {
        schoolNumber: "11503080203",
        name: "李四",
        academy: "会计学院",
        major: "会计学",
        grade: 2018,
        class: 3,
        age: 19,
    }, {
        schoolNumber: "11503080204",
        name: "王五",
        academy: "理学院",
        major: "应用物理",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080204",
        name: "赵六",
        academy: "会计学院",
        major: "金融学",
        grade: 2017,
        class: 3,
        age: 21,
    }];
    let page = 1;//第几页
    let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
    let stuNumber = students.length;
    for (let i = 0; i < 10; i++) {//初始页面信息显示
        let student = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (i + 1) + "</td>" + "<td>" + students[i].schoolNumber + "</td>" + "<td>" + students[i].name + "</td>" + "<td>" + students[i].academy + "</td>" + "<td>" + students[i].major + "</td>" + "<td>"
            + students[i].grade + "</td>" + "<td>" + students[i].class + "</td>" + "<td>" + students[i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">查看</a> <a href=\"javascript:;\" class=\"modify\">修改</a></td>" + "</label></tr>");
        $("tbody").append(student);
    }
    $("tbody").trigger("create");//trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）
    $("#pgn").text(page);
    $("#en").text(stuNumber);
    $("#add").click(function () {//点击新增按钮触发的动作
        $("#sbg").addClass("sbg");
        $("#asi").show();
    });
 
    let objKeys = ["schoolNumber", "name", "academy", "major", "grade", "class", "age"];
    $("#submit").click(function () {//提交按钮点击触发的动作
        let student = {};
        let isEmpty = false;
        $("#asi").find("input").each(function (index, domEle) {
            if (!domEle.value) {//如果添加时表单内有值为空，则不进行添加
                isEmpty = true;
                /*return;*/
            }
            student[objKeys[index]] = domEle.value;
        });
        if (!isEmpty) {
            students[stuNumber] = student;
            stuNumber++;
            $("#en").text(stuNumber);
            /*$("#sbg").removeClass("sbg");
            $("#asi").hide();*/
            // $("tbody tr:first").siblings().remove();//清空界面
            let lpren = $("tbody tr").length - 1;//最后一页剩余的条目数;
            if (no + 10 > stuNumber && lpren < 10) {//增加一个append函数，如果显示的是最后一页那么需要更新界面。
                $("tbody tr:last").after("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + lpren + 1) + "</td>" + "<td>" + student.schoolNumber + "</td>" + "<td>" + student.name + "</td>" + "<td>" + student.academy + "</td>" + "<td>" + student.major + "</td>" + "<td>"
                    + student.grade + "</td>" + "<td>" + student.class + "</td>" + "<td>" + student.age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">查看</a> <a href=\"javascript:;\" class=\"modify\">修改</a></td>" + "</tr>");
                /*            let i = 0;
                            while (i < 10 && no + i < stuNumber) {
                                let student = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
                                    + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">查看</a> <a href=\"javascript:;\" class=\"modify\">修改</a></td>" + "</tr>");
                                $("tbody").append(student);
                                i++;
                            }*/
            }
        }
        $("#sbg").removeClass("sbg");
        $("#asi").hide();
 
    });
 
    $("tbody").on("click", ".check", function () {//点击查看按钮触发的动作
        $("#sbg").addClass("sbg");
        $("#chesi").show();
        let stuIndex = $(this).parent().parent().find("td")[1].innerText - 1;
        // let i = 0;
        $("#chesi").find("input").each(function (index, domEle) {
            domEle.value = students[stuIndex][objKeys[index]];//index->i
        });
    });
 
    let modifyNumber;
    /* $(".modify").click(function () {//jQuery出现的新添加元素点击事件无效
         $("#sbg").addClass("sbg");
         $("#chasi").show();
         modifyNumber = $(this).parent().parent().find("td")[1].innerText - 1;
         let i = 0;
         $("#chasi").find("input").each(function (index, domEle) {
             domEle.value = students[modifyNumber][objKeys[i++]];
         });
     });*/
    $("tbody").on("click", ".modify", function () {//点击修改按钮触发的动作,解决了jQuery出现的新添加元素点击事件无效问题
        $("#sbg").addClass("sbg");
        $("#chasi").show();
        modifyNumber = $(this).parent().parent().find("td")[1].innerText - 1;
        let i = 0;
        $("#chasi").find("input").each(function (index, domEle) {
            domEle.value = students[modifyNumber][objKeys[i++]];
        });
    });
 
 
    $("#save").click(function () {//点击保存按钮触发的动作
        $("#chasi").find("input").each(function (index, domEle) {
            if (domEle.value)
                students[modifyNumber][objKeys[index]] = domEle.value;
        });
        $("tbody tr").eq(modifyNumber - no + 1).remove();
        $("tbody tr").eq(modifyNumber - no).after("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (modifyNumber - no + 1) + "</td>" + "<td>" + students[modifyNumber].schoolNumber + "</td>" + "<td>" + students[modifyNumber].name + "</td>" + "<td>" + students[modifyNumber].academy + "</td>" + "<td>" + students[modifyNumber].major + "</td>" + "<td>"
            + students[modifyNumber].grade + "</td>" + "<td>" + students[modifyNumber].class + "</td>" + "<td>" + students[modifyNumber].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">查看</a> <a href=\"javascript:;\" class=\"modify\">修改</a></td>" + "</tr>");
        /*$("tbody tr:first").siblings().remove();//清空界面
        for (let i = no; i < no+10; i++) {//初始页面信息显示
            let student = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (i + 1) + "</td>" + "<td>" + students[i].schoolNumber + "</td>" + "<td>" + students[i].name + "</td>" + "<td>" + students[i].academy + "</td>" + "<td>" + students[i].major + "</td>" + "<td>"
                + students[i].grade + "</td>" + "<td>" + students[i].class + "</td>" + "<td>" + students[i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">查看</a> <a href=\"javascript:;\" class=\"modify\">修改</a></td>" + "</tr>");
            $("tbody").append(student);
        }
        $("tbody").trigger("create");*/
        $("#sbg").removeClass("sbg");
        $("#chasi").hide();
    });
 
 
    $(".cancel").click(function () {//多个取消按钮点击触发的动作
        $("#sbg").removeClass("sbg");
        $(".achaesi").hide();
    });
 
    $("tbody tr td:first").click(function () {//全选操作用到了JQuery的隐示迭代
        $("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked"));
    });
 
    $("tbody").on("click", $("tbody tr:nth-of-type(1)").siblings().find("input"), function () {
        let isSelectAll = true;
        $("tbody tr:nth-of-type(1)").siblings().find("input").each(function (index, domEle) {
            if ($(domEle).prop("checked") == false)
                isSelectAll = false;
        });
        $("tbody tr:first td:first input").prop("checked", isSelectAll);
    })
 
    let update = (no) => {
        let i = 0;//用于增加信息条目的变量;
        $("tbody tr:first").siblings().remove();//清空界面
        while (i < 10 && no + i < stuNumber) {
            let student = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
                + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">查看</a> <a href=\"javascript:;\" class=\"modify\">修改</a></td>" + "</tr>");
            $("tbody").append(student);
            i++;
        }
        $("tbody").trigger("create");
    }
 
    $("#delete").click(function () {
        if (confirm("确认要删除这些信息吗？")) {
            let delNumber = 0;//删除的信息条目数;
            let delIndexs = []; //删除信息条目的下标;用于后期处理避免“落空”导致移动无效
            // let i = 0;//用于增加信息条目的变量;
            $("tbody tr td input").each(function (index, domEle) {
                if (index != 0 && $(domEle).prop("checked")) {//index != 0,防止标题行被删除
                    delIndexs[delIndexs.length] = $(domEle).parent().next().text() - 1;
                    $(domEle).parent().parent().remove();
                    delNumber++;
                }
            });
 
            for (let j = delIndexs.length - 1; j >= 0; j--) {
                for (let k = delIndexs[j]; k < stuNumber - 1; k++) {//低效的代码，需要大量移动对象索引;对JS不太熟悉，还没有想到高效的解决办法!
                    students[k] = students[k + 1];
                }
            }
 
            stuNumber -= delNumber;//指向储存底层数据(学生对象)的数组尾部的指针“移动”
            $("#en").text(stuNumber);//更新条目数
            if (stuNumber == no) {
                no -= 10;
                page--;
                $("#pgn").text(page);
            }
            update(no);
            /*            $("tbody tr:first").siblings().remove();//清空界面
                        while (i < 10 && no + i < stuNumber) {
                            let student = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
                                + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">查看</a> <a href=\"javascript:;\" class=\"modify\">修改</a></td>" + "</tr>");
                            $("tbody").append(student);
                            i++;
                        }
                        $("tbody").trigger("create");*/
            $("tbody tr td:first input").prop("checked", false);
        }
    });
 
    $("#nextpage").click(function () {
        if (no + 10 < stuNumber) {
            no += 10;
            page++;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);
            /*let i = 0;//用于增加信息条目的变量;
            $("tbody tr:first").siblings().remove();//清空界面
            while (i < 10 && no + i < stuNumber) {
                let student = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
                    + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">查看</a> <a href=\"javascript:;\" class=\"modify\">修改</a></td>" + "</tr>");
                $("tbody").append(student);
                i++;
            }
            $("tbody").trigger("create");*/
        } else {
            alert("已经是最后一页。");
        }
    });
 
    $("#lastpage").click(function () {
        if (no - 10 >= 0) {
            no -= 10;
            page--;
            $("#pgn").text(page);
            update(no);
            $("tbody tr:first td:first input").prop("checked", false);
            /*            let i = 0;//用于增加信息条目的变量;
                        $("tbody tr:first").siblings().remove();//清空界面
                        while (i < 10 && no + i < stuNumber) {
                            let student = $("<tr>" + "<td><input type=\"checkbox\"></td>" + "<td>" + (no + i + 1) + "</td>" + "<td>" + students[no + i].schoolNumber + "</td>" + "<td>" + students[no + i].name + "</td>" + "<td>" + students[no + i].academy + "</td>" + "<td>" + students[no + i].major + "</td>" + "<td>"
                                + students[no + i].grade + "</td>" + "<td>" + students[no + i].class + "</td>" + "<td>" + students[no + i].age + "</td>" + "<td><a href=\"javascript:;\" class=\"check\">查看</a> <a href=\"javascript:;\" class=\"modify\">修改</a></td>" + "</tr>");
                            $("tbody").append(student);
                            i++;
                        }
                        $("tbody").trigger("create");*/
        } else {
            alert("已经是第一页。");
        }
    });
 
})

四、学生信息管理系统主界面

   （1）系统主界面如图2所示，要求学生的信息存入一个数组中，每个学生是一个对象。

JavaScript+HTML实现学生信息管理系统

图1 学生信息管理系统主界面

（2）点击“新增”按钮显示一个新的窗体，录入学生的基本信息，在保存时，需要检验数据是否合法。新增页面如图3所示。

JavaScript+HTML实现学生信息管理系统

图2 新增界面

（3）点击“修改”按钮显示一个新的窗体，修改当前行的学生信息。

JavaScript+HTML实现学生信息管理系统

图3 修改界面

（4）点击“查看”按钮显示一个新的窗体，显示当前行的学生信息。此时输入框的内容不可修改。

JavaScript+HTML实现学生信息管理系统

图4 查看

（5）其他要求

  • 点击“删除”按钮，显示一个询问提示，如果选择是就删除当前行。可以多选删除，点击全选时是选择当前页所有学生。
  • 隔行换色。
  • 行的移入移出效果（hover）。
  • 能够实现下一页和上一页的功能,不能翻页的时候给出提示。
  • 展示出共有多少条数据，每页的数据条数，当前页数。

到此这篇关于JavaScript+HTML实现学生信息管理系统的文章就介绍到这了,更多相关js+html实现学生信息管理系统内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

JavaScript+HTML实现学生信息管理系统

- Author -

Dev-Flow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
Vue渲染函数详解
Sep 15 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
JS实现简单控制视频播放倍速的实例代码
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 #Javascript
详解如何在Canvas中添加事件的方法
Apr 17 #Javascript
Canvas三种动态画圆实现方法说明(小结)
如何在CocosCreator里画个炫酷的雷达图
Mint UI(1) cmd(1) 相对路径(1) Switch(1) 远程桌面(2) 慢日志(1) 相对路径 (1) mt-swipe(1) REST(1) exists(2)
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
javascript实现简易计算器
2017/02/01 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
webpack4简单入门实例
2018/09/06 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
简单介绍Python中的round()方法
2015/05/15 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
深入了解Django View（视图系统）
2019/07/23 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
欧洲最大的球衣网上商店：Kitbag
2017/11/11 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
路政管理专业推荐信
2013/11/11 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android