首页
所有分类
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定时器
Jan 03 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
Vue3.0的优化总结
Oct 16 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
JS实现简单控制视频播放倍速的实例代码
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 #Javascript
详解如何在Canvas中添加事件的方法
Apr 17 #Javascript
Canvas三种动态画圆实现方法说明(小结)
如何在CocosCreator里画个炫酷的雷达图
加载异常(1) caddy(1) localStorage(1) 骨架屏(1) 共享文件夹(1) 横向滚动(1) NginxConfig(1) SVN(1) Postman(1) ESXI(1)
You might like
基于Zend的Config机制的应用分析
2013/05/02 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
基于canvas实现手写签名（vue）
2020/05/21 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python Property属性的2种用法
2015/06/21 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
美国网上花店：JustFlowers
2017/02/12 全球购物
荷兰度假屋租赁网站：Aan Zee
2020/02/28 全球购物
黄继光的英雄事迹材料
2014/02/13 职场文书
爱情寄语大全
2014/04/09 职场文书
初中生评语大全
2014/04/24 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
实训报告范文大全
2014/11/04 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
python 如何用terminal输入参数
2021/05/25 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
德生BCL3000抢先使用感受和评价
2022/04/07 无线电