JavaScript+HTML to implement student information management system
1. IntroductionAn 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. CodeThe 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
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:
|
<<: How to modify the default encoding of mysql in Linux
>>: Analysis of different MySQL table sorting rules error
Recommend
HTML5 and jQuery to implement preview code examples before uploading local pictures
HTML5 and jQuery implement the preview of local i...
Several methods of horizontal and vertical centering of div content using css3 flex
1. flex-direction: (direction of element arrangem...
WeChat Mini Program uses simultaneous interpretation to implement speech recognition
I use the simultaneous interpretation voice recog...
How to quickly query 10 million records in Mysql
Table of contents Normal paging query How to opti...
Idea deploys remote Docker and configures the file
1. Modify the Linux server docker configuration f...
Teach you a trick to permanently solve the problem of MySQL inserting Chinese characters
Table of contents Preface first step: Step 2: Mod...
CSS imitates Apple's smooth switch button effect
Table of contents 1. Code analysis 2. Source code...
Nginx installation error solution
1. Unzip nginx-1.8.1.tar.gz 2. Unzip fastdfs-ngin...
Detailed explanation of how to use Vue to load weather components
This article shares with you how to use Vue to lo...
How to handle super large form examples with Vue+ElementUI
Recently, due to business adjustments in the comp...
How to write asynchronous tasks in modern JavaScript
Preface In this article, we'll explore the ev...
What are the rules for context in JavaScript functions?
Table of contents 1. Rule 1: Object.Method() 1.1 ...
How to use iframe to apply the data of other web pages while maintaining compatibility
Below is the code that Shiji Tiancheng uses to ca...
Solution to the problem that input in form cannot be submitted when disabled
I wrote a test program before, in which adding and...
Specific method of viewing user authorization information in mysql
Specific method: 1. Open Command Prompt 2. Enter ...