JavaScript+HTML实现学生信息管理系统-阿里云开发者社区

这篇文章主要介绍了JavaScript实现学生信息管理系统,文中有非常详细的代码示例,对正在学习js的小伙伴们有一定的帮助,需要的朋友可以参考下

一、前言

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

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

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

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

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

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

二、效果图

网络异常，图片无法展示

三、代码

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

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

HTML:

<!DOCTYPE html>

<head>

<title>Student Information Management System</title>

</head>

<body>

<div>

<hr/>

<h1>学生信息管理系统</h1>

<hr/>

</header>

<main>

<div>

</div>

<table>

<tbody>

</tr>

<!--<tr>

<td>计算机科学与工程学院</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>计算机科学与工程学院</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>计算机科学与工程学院</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>计算机科学与工程学院</td>

</tr>-->

</tbody>

</table>

<p>第<span id="pgn"></span>页,共<span id="en"></span>条 (每页最多显示10条)</p>

</div>

</main>

</div>

<h2>新增学生信息</h2>

</div>

<hr/>

</div>

</div>

<h2>修改学生信息</h2>

</div>

<hr/>

</div>

</div>

<h2>查看学生信息</h2>

</div>

<hr/>

</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",

academy: "两江人工智能学院",

major: "软件工程",

grade: 2019,

age: 20,

}, {

schoolNumber: "11503080202",

academy: "计算机工程与技术学院",

major: "计算机科学与技术",

grade: 2019,

age: 19,

}, {

schoolNumber: "11503080203",

academy: "会计学院",

major: "会计学",

grade: 2018,

age: 19,

}, {

schoolNumber: "11503080204",

academy: "理学院",

major: "应用物理",

grade: 2017,

age: 21,

}, {

schoolNumber: "11503080204",

academy: "会计学院",

major: "金融学",

grade: 2017,

age: 21,

}, {

schoolNumber: "11503080202",

academy: "计算机工程与技术学院",

major: "计算机科学与技术",

grade: 2019,

age: 19,

}, {

schoolNumber: "11503080203",

academy: "会计学院",

major: "会计学",

grade: 2018,

age: 19,

}, {

schoolNumber: "11503080204",

academy: "理学院",

major: "应用物理",

grade: 2017,

age: 21,

}, {

schoolNumber: "11503080204",

academy: "会计学院",

major: "金融学",

grade: 2017,

age: 21,

}, {

schoolNumber: "11503080202",

academy: "计算机工程与技术学院",

major: "计算机科学与技术",

grade: 2019,

age: 19,

}, {

schoolNumber: "11503080203",

academy: "会计学院",

major: "会计学",

grade: 2018,

age: 19,

}, {

schoolNumber: "11503080204",

academy: "理学院",

major: "应用物理",

grade: 2017,

age: 21,

}, {

schoolNumber: "11503080204",

academy: "会计学院",

major: "金融学",

grade: 2017,

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++) {//初始页面信息显示

$("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) {

$("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) {

$("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) {

$("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) {

$("tbody").append(student);

i++;

}

$("tbody").trigger("create");*/

} else {

alert("已经是第一页。");

}

});

})

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

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

网络异常，图片无法展示

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

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

网络异常，图片无法展示

图2 新增界面

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

网络异常，图片无法展示

图3 修改界面

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

网络异常，图片无法展示

图4 查看

（5）其他要求

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

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

原文链接：https://www.mimisucai.com/teach/javascript/29804.html

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

一、前言

二、效果图

三、代码

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景