JavaScript+HTML to implement student information management system

JavaScript+HTML to implement student information management system

1. Introduction

An array is used to store the information of all student objects, and bidirectional updates are implemented. Initially (the object information in the array "fills the interface"), and subsequent interface operations can update the information of the objects in the array (the quantity and the data domain information itself).

Pros: Many of the details are handled better by the JQuery code.

Use HTML5's pattern + regular expression to implement form validation and corresponding prompts.

Disadvantages: The background code processing efficiency of deleting student objects is low ("fake" deletion: moving the position of the student object index + changing the array length).

CSS part - there is a problem with the scaling of the interface. (Not planning on the front end/too lazy to modify it for now). .

Some codes can be better processed to achieve the purpose of reuse, so they are not processed.

2. Rendering

3. Code

The code before the improvement was made during the writing process was not deleted, so the code looks a bit long (the thinking process of writing the code is retained)

Delete the commented code and some unnecessary content, the code is not too long.

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>Student Information Management System</h1>
        <hr/>
    </header>
    <main>
        <div>
            <div id="adbt">
                <button class="gre" id="add">Add</button>
                <button class="red" id="delete">Delete</button>
            </div>
            <table>
                <tbody>
                <tr id="thead">
                    <td><input type="checkbox"></td>
                    <td>Serial number</td>
                    <td>Student Number</td>
                    <td>Name</td>
                    <td>College</td>
                    <td>Professional</td>
                    <td>Grade</td>
                    <td>Class</td>
                    <td>Age</td>
                    <td>Operation</td>
                </tr>
                <!--<tr>
                    <td name="abc"><input type="checkbox"></td>
                    <td>1</td>
                    <td>11503080201</td>
                    <td>Zhang San</td>
                    <td>School of Computer Science and Engineering</td>
                    <td>Software Engineering</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>Li Si</td>
                    <td>School of Accounting</td>
                    <td>Accounting</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>Wang Er</td>
                    <td>Faculty of Science</td>
                    <td>Mathematics</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>Zhang San</td>
                    <td>School of Computer Science and Engineering</td>
                    <td>Software Engineering</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>Li Si</td>
                    <td>School of Accounting</td>
                    <td>Accounting</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>Wang Er</td>
                    <td>Faculty of Science</td>
                    <td>Mathematics</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>Zhang San</td>
                    <td>School of Computer Science and Engineering</td>
                    <td>Software Engineering</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>Li Si</td>
                    <td>School of Accounting</td>
                    <td>Accounting</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>Wang Er</td>
                    <td>Faculty of Science</td>
                    <td>Mathematics</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>Zhang San</td>
                    <td>School of Computer Science and Engineering</td>
                    <td>Software Engineering</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>Page <span id="pgn"></span>, total <span id="en"></span> entries (up to 10 entries per page)</p><!--Number of entries-->
                <div id="tpbt">
                    <button class="gre" id="lastpage">Previous page</button>
                    <button class="red" id="nextpage">Next page</button>
                </div>
            </div>
        </div>
    </main>
</div>
<div id="sbg"></div><!--Shadow background when adding, deleting, modifying and checking-->
<div class="achaesi" id="asi">
<!-- <form action="" method="post">-->
    <h2>Add student information</h2>
    <div class="ifm">
        <div><label for="assn">Student Number</label> <input id="assn" type="text" placeholder="11503080201" required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('Please enter an 11-digit number combination')"></div>
        <div><label for="asn">Name</label> <input id="asn" type="text" placeholder="Lei Jun" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Please enter a correct name')"></div>
        <div><label for="asac">College</label> <input id="asac" type="text" placeholder="Liangjiang College of Artificial Intelligence" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Please enter the correct college name')"></div>
        <div><label for="asm">Professional</label> <input id="asm" type="text" placeholder="Software Engineering" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Please enter the correct professional name')"></div>
        <div><label for="asg">Grade</label> <input id="asg" type="text" placeholder="2015" required="required" max="2020" maxlength="4" pattern="^[0-9]{4}$" oninvalid="setCustomValidity('Please enter the correct grade')"></div>
        <div><label for="asc">Class</label> <input id="asc" type="text" placeholder="1" required="required" maxlength="1"></div>
        <div><label for="asag">Age</label> <input id="asag" type="number" placeholder="20" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('Please enter the correct age')"></div>
    </div>
    <hr/>
    <div class="scbt">
        <button type="submit" id="submit">Submit</button>
        <button class="cancel">Cancel</button>
    </div>
<!-- </form>-->
</div>
<div class="achaesi" id="chasi">
<!-- <form action="" method="post">-->
    <h2>Modify student information</h2>
    <div class="ifm">
        <div><label for="chassn">Student Number</label> <input id="chassn" type="text" readonly required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('Please enter an 11-digit number combination')"></div>
        <div><label for="chasn">Name</label> <input id="chasn" type="text" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Please enter a correct name')"></div>
        <div><label for="chasac">College</label> <input id="chasac" type="text" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Please enter the correct college name')"></div>
        <div><label for="chasm">Professional</label> <input id="chasm" type="text" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('Please enter a correct professional name')"></div>
        <div><label for="chasg">Grade</label> <input id="chasg" type="text" required="required" max="2020" maxlength="4" pattern=^[0-9]{4}$" oninvalid="setCustomValidity('Please enter the correct grade')"></div>
        <div><label for="chasc">Class</label> <input id="chasc" type="text" required="required" maxlength="1"></div>
        <div><label for="chasag">Age</label> <input id="chasag" type="text" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('Please enter the correct age')"></div>
    </div>
    <hr/>
    <div class="scbt">
        <button type="submit" id="save">Save</button>
        <button class="cancel">Cancel</button>
    </div>
<!-- </form>-->
</div>
<div class="achaesi" id="chesi">
    <h2>View student information</h2>
    <div class="ifm">
        <div><label for="chessn">Student Number</label> <input type="text" readonly id="chessn"></div>
        <div><label for="chesn">Name</label> <input type="text" readonly id="chesn"></div>
        <div><label for="chesac">College</label> <input type="text" readonly id="chesac"></div>
        <div><label for="chesm">Professional</label> <input type="text" readonly id="chesm"></div>
        <div><label for="chesg">Grade</label> <input type="text" readonly id="chesg"></div>
        <div><label for="chesc">Class</label> <input type="text" readonly id="chesc"></div>
        <div><label for="chesag">Age</label> <input type="text" readonly id="chesag"></div>
    </div>
    <hr/>
    <div class="scbt">
        <button class="cancel">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 = [{//initial interface data schoolNumber: "11503080201",
        name: "Lei Jun",//my idol
        academy: "Liangjiang Artificial Intelligence Academy",
        major: "Software Engineering",
        grade: 2019,
        class: 2,
        age: 20,
    }, {
        schoolNumber: "11503080202",
        name: "Zhang San",
        academy: "School of Computer Engineering and Technology",
        major: "Computer Science and Technology",
        grade: 2019,
        class: 1,
        age: 19,
    }, {
        schoolNumber: "11503080203",
        name: "Li Si",
        academy: "Accounting Academy",
        major: "Accounting",
        grade: 2018,
        class: 3,
        age: 19,
    }, {
        schoolNumber: "11503080204",
        name: "Wang Wu",
        academy: "Faculty of Science",
        major: "Applied Physics",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080204",
        name: "Zhao Liu",
        academy: "Accounting Academy",
        major: "Finance",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080202",
        name: "Zhang San",
        academy: "School of Computer Engineering and Technology",
        major: "Computer Science and Technology",
        grade: 2019,
        class: 1,
        age: 19,
    }, {
        schoolNumber: "11503080203",
        name: "Li Si",
        academy: "Accounting Academy",
        major: "Accounting",
        grade: 2018,
        class: 3,
        age: 19,
    }, {
        schoolNumber: "11503080204",
        name: "Wang Wu",
        academy: "Faculty of Science",
        major: "Applied Physics",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080204",
        name: "Zhao Liu",
        academy: "Accounting Academy",
        major: "Finance",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080202",
        name: "Zhang San",
        academy: "School of Computer Engineering and Technology",
        major: "Computer Science and Technology",
        grade: 2019,
        class: 1,
        age: 19,
    }, {
        schoolNumber: "11503080203",
        name: "Li Si",
        academy: "Accounting Academy",
        major: "Accounting",
        grade: 2018,
        class: 3,
        age: 19,
    }, {
        schoolNumber: "11503080204",
        name: "Wang Wu",
        academy: "Faculty of Science",
        major: "Applied Physics",
        grade: 2017,
        class: 3,
        age: 21,
    }, {
        schoolNumber: "11503080204",
        name: "Zhao Liu",
        academy: "Accounting Academy",
        major: "Finance",
        grade: 2017,
        class: 3,
        age: 21,
    }];
    let page = 1; // page number let no = 0; // the first object of the displayed page number is the object number in the array, the initial subscript is 0
    let stuNumber = students.length;
    for (let i = 0; i < 10; i++) {//Initial page information display 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\">View</a> <a href=\"javascript:;\" class=\"modify\">Modify</a></td>" + "</label></tr>");
        $("tbody").append(student);
    }
    $("tbody").trigger("create"); //The trigger() method triggers the specified event on the selected element and the default behavior of the event (such as form submission)
    $("#pgn").text(page);
    $("#en").text(stuNumber);
    $("#add").click(function () {//Action triggered by clicking the add button$("#sbg").addClass("sbg");
        $("#asi").show();
    });
 
    let objKeys = ["schoolNumber", "name", "academy", "major", "grade", "class", "age"];
    $("#submit").click(function () {//Action triggered by clicking the submit button let student = {};
        let isEmpty = false;
        $("#asi").find("input").each(function (index, domEle) {
            if (!domEle.value) {//If the value in the form is empty when adding, it will not be added 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(); //Clear the interface let lpren = $("tbody tr").length - 1; //Number of remaining entries on the last page;
            if (no + 10 > stuNumber && lpren < 10) { //Add an append function. If the last page is displayed, the interface needs to be updated.
                $("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\">View</a> <a href=\"javascript:;\" class=\"modify\">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\">View</a> <a href=\"javascript:;\" class=\"modify\">Modify</a></td>" + "</tr>");
                                $("tbody").append(student);
                                i++;
                            }*/
            }
        }
        $("#sbg").removeClass("sbg");
        $("#asi").hide();
 
    });
 
    $("tbody").on("click", ".check", function () {//Click the view button to trigger the action$("#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 () {//The click event of the newly added element that appears in jQuery is invalid $("#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 () {//Click the modify button to trigger the action, which solves the problem of invalid click event of newly added elements in 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 () {//Action triggered by clicking the save button$("#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\">View</a> <a href=\"javascript:;\" class=\"modify\">Modify</a></td>" + "</tr>");
        /*$("tbody tr:first").siblings().remove();//Clear interfacefor (let i = no; i < no+10; i++) {//Initial page information displaylet 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\">View</a> <a href=\"javascript:;\" class=\"modify\">Modify</a></td>" + "</tr>");
            $("tbody").append(student);
        }
        $("tbody").trigger("create");*/
        $("#sbg").removeClass("sbg");
        $("#chasi").hide();
    });
 
 
    $(".cancel").click(function () {//Actions triggered by clicking multiple cancel buttons$("#sbg").removeClass("sbg");
        $(".achaesi").hide();
    });
 
    $("tbody tr td:first").click(function () {//The select all operation uses JQuery's implicit iteration $("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; //Variable used to add information entries;
        $("tbody tr:first").siblings().remove(); //Clear the interface 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\">View</a> <a href=\"javascript:;\" class=\"modify\">Modify</a></td>" + "</tr>");
            $("tbody").append(student);
            i++;
        }
        $("tbody").trigger("create");
    }
 
    $("#delete").click(function () {
        if (confirm("Are you sure you want to delete this information?")) {
            let delNumber = 0; //The number of information entries deleted;
            let delIndexs = []; //Delete the subscript of the information entry; used for post-processing to avoid "falling through" and causing invalid movement // let i = 0; //Variable used to add information entries;
            $("tbody tr td input").each(function (index, domEle) {
                if (index != 0 && $(domEle).prop("checked")) {//index != 0, to prevent the title row from being deleted 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++) { // Inefficient code, requires a lot of moving object indexes; not very familiar with JS, and haven't thought of an efficient solution yet!
                    students[k] = students[k + 1];
                }
            }
 
            stuNumber -= delNumber; //Pointer to the end of the array storing the underlying data (student object) "moves"
            $("#en").text(stuNumber); //Update the number of entries if (stuNumber == no) {
                no -= 10;
                page--;
                $("#pgn").text(page);
            }
            update(no);
            /* $("tbody tr:first").siblings().remove();//Clear the interface 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\">View</a> <a href=\"javascript:;\" class=\"modify\">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; //Variable used to add information entries;
            $("tbody tr:first").siblings().remove(); //Clear the interface 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\">View</a> <a href=\"javascript:;\" class=\"modify\">Modify</a></td>" + "</tr>");
                $("tbody").append(student);
                i++;
            }
            $("tbody").trigger("create");*/
        } else {
            alert("This is the last page.");
        }
    });
 
    $("#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; //Variable used to add information entries;
                        $("tbody tr:first").siblings().remove(); //Clear the interface 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\">View</a> <a href=\"javascript:;\" class=\"modify\">Modify</a></td>" + "</tr>");
                            $("tbody").append(student);
                            i++;
                        }
                        $("tbody").trigger("create");*/
        } else {
            alert("This is already the first page.");
        }
    });
 
})

4. Main interface of student information management system

(1) The main interface of the system is shown in Figure 2. It requires that students' information be stored in an array, and each student is an object.

Figure 1 Main interface of the student information management system

(2) Click the "Add" button to display a new window and enter the student's basic information. When saving, you need to check whether the data is legal. The newly added page is shown in Figure 3.

Figure 2 New interface

(3) Click the "Modify" button to display a new window to modify the student information of the current row.

Figure 3 Modification interface

(4) Click the "View" button to display a new window showing the student information of the current row. The content of the input box cannot be modified at this time.

Figure 4 View

(5) Other requirements

  • Click the "Delete" button to display a query prompt. If you select yes, the current row will be deleted. You can select multiple students to delete. Clicking Select All will select all students on the current page.
  • Change colors every other line.
  • The row movement effect (hover).
  • It can realize the functions of next page and previous page, and give prompts when the page cannot be turned.
  • Displays the total number of data, the number of data per page, and the current page number.

This is the end of this article about JavaScript+HTML implementation of student information management system. For more relevant js+html implementation of student information management system content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • 12 front-end frameworks suitable for back-end management system development (summary)
  • Java student management system interface simple implementation (full)
  • Java practical project to hone the implementation process of the community property management system
  • Tianyi Business System Backstage Management Account Cracked HTML Version
  • Example of front-end HTML page template implementation for community backend management system project

<<:  How to modify the default encoding of mysql in Linux

>>:  Analysis of different MySQL table sorting rules error

Recommend

Introduction to Docker Architecture

Docker includes three basic concepts: Image: A Do...

XHTML 1.0 Reference

Arrange by functionNN : Indicates which earlier ve...

Ways to improve MongoDB performance

MongoDB is a high-performance database, but in th...

Implementation of css transform page turning animation record

Page turning problem scenario B and C are on the ...

MySQL Series 4 SQL Syntax

Table of contents Tutorial Series 1. Introduction...

Detailed explanation of the implementation process of dual-master synchronization of partial tables in MySQL 5.7

Preface Recently, I encountered a requirement. Du...

Example of exporting and importing Docker containers

Table of contents Exporting Docker containers Imp...

XHTML Getting Started Tutorial: What is XHTML?

What is HTML? To put it simply: HTML is used to m...

The actual process of encapsulating axios in the project

Table of contents Preface Benefits of axios encap...

Detailed explanation of the practice of installing the Permeate range system using VMware

1. Background We do some internal training from t...

Detailed explanation of CSS pre-compiled languages ​​and their differences

1. What is As a markup language, CSS has a relati...

Implementation of single process control of Linux C background service program

introduce Usually a background server program mus...

mysql8.0.23 linux (centos7) installation complete and detailed tutorial

Table of contents What is a relational database? ...

Detailed explanation of CocosCreator Huarongdao digital puzzle

Table of contents Preface text 1. Panel 2. Huaron...

A comprehensive understanding of Vue.js functional components

Table of contents Preface React Functional Compon...