本篇文章小编给大家分享一下JavaScript+HTML实现学生信息管理系统代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

一、前言

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

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

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

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

CSS部分——界面的缩放存在问题。

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

二、效果图

三、代码

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

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

HTML:

Student Information Management System

学生信息管理系统

新增

删除

序号

学号

姓名

学院

专业

年级

班级

年龄

操作

第页,共条 (每页最多显示10条)

上一页

下一页

新增学生信息

学号

姓名

学院

专业

年级

班级

年龄

提交

取消

修改学生信息

学号

姓名

学院

专业

年级

班级

年龄

保存

取消

查看学生信息

学号

姓名

学院

专业

年级

班级

年龄

取消

CSS:

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

color: red;

}

.sbg {

position: absolute;

top: 0;

width: 100%;

height: 100%;

background-color: black;

opacity: 0.4;

z-index: 1;

}

body {

background-color: #f0ece9;

}

header {

display: flex;

flex-flow: row nowrap;

justify-content: space-between;

}

header h1 {

color: #9a9897;

}

header hr {

margin: 20px 20px 0;

background-color: #bc9470;

border: 2px solid #bc9470;

width: 30%;

height: 0;

}

main #adbt {

margin-left: 70px;

}

main button {

margin: 20px 5px;

width: 85px;

height: 40px;

color: white;

}

main button.gre {

background-color: #5cb85c;

}

main button.red {

background-color: #d9534f;

}

main #navigate {

padding: 0 70px;

display: flex;

flex-flow: row nowrap;

justify-content: space-between;

}

main #navigate p {

margin-top: 30px;

}

table {

margin: 0 auto;

width: 90%;

text-align: center;

border-spacing: 0;

}

table tbody tr:first-of-type {

background-color: #dadee1 !important;

height: 60px;

}

table tbody tr {

height: 45px;

}

table tbody tr:nth-child(odd) {

background-color: #eef1f8;

}

table tbody tr:nth-child(even) {

background-color: #ffffff;

}

table tbody tr:not([id=thead]):hover {

cursor: pointer;

background-color: #e9e9e9;

}

.achaesi {

display: none;

position: absolute;

top: 20%;

left: 34%;

background-color: white;

z-index: 2;

width: 500px;

height: 420px;

}

.achaesi h2 {

padding: 5px 20px;

font-size: large;

background-color: #555555;

color: white;

}

.achaesi .ifm {

width: 300px;

margin: 10px auto;

display: flex;

flex-flow: column nowrap;

}

.achaesi .ifm div {

margin: 10px;

}

.achaesi .ifm div input {

width: 220px;

height: 20px;

}

.achaesi .scbt {

float: right;

margin-top: 6px;

margin-right: 30px;

}

.achaesi .scbt button:first-of-type {

width: 85px;

height: 36px;

background-color: #5cb85c;

}

.achaesi .scbt button:last-of-type {

width: 85px;

height: 36px;

background-color: white;

}

/*# sourceMappingURL=studentInformationManagementSystem.css.map */

JS:

$(function () {

let students = [{//初始界面数据

schoolNumber: "11503080201",

name: "雷军",//my idol

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

major: "软件工程",

grade: 2019,

class: 2,

age: 20,

}, {

schoolNumber: "11503080202",

name: "张三",

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

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

grade: 2019,

class: 1,

age: 19,

}, {

schoolNumber: "11503080203",

name: "李四",

academy: "会计学院",

major: "会计学",

grade: 2018,

class: 3,

age: 19,

}, {

schoolNumber: "11503080204",

name: "王五",

academy: "理学院",

major: "应用物理",

grade: 2017,

class: 3,

age: 21,

}, {

schoolNumber: "11503080204",

name: "赵六",

academy: "会计学院",

major: "金融学",

grade: 2017,

class: 3,

age: 21,

}, {

schoolNumber: "11503080202",

name: "张三",

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

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

grade: 2019,

class: 1,

age: 19,

}, {

schoolNumber: "11503080203",

name: "李四",

academy: "会计学院",

major: "会计学",

grade: 2018,

class: 3,

age: 19,

}, {

schoolNumber: "11503080204",

name: "王五",

academy: "理学院",

major: "应用物理",

grade: 2017,

class: 3,

age: 21,

}, {

schoolNumber: "11503080204",

name: "赵六",

academy: "会计学院",

major: "金融学",

grade: 2017,

class: 3,

age: 21,

}, {

schoolNumber: "11503080202",

name: "张三",

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

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

grade: 2019,

class: 1,

age: 19,

}, {

schoolNumber: "11503080203",

name: "李四",

academy: "会计学院",

major: "会计学",

grade: 2018,

class: 3,

age: 19,

}, {

schoolNumber: "11503080204",

name: "王五",

academy: "理学院",

major: "应用物理",

grade: 2017,

class: 3,

age: 21,

}, {

schoolNumber: "11503080204",

name: "赵六",

academy: "会计学院",

major: "金融学",

grade: 2017,

class: 3,

age: 21,

}];

let page = 1;//第几页

let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0

let stuNumber = students.length;

for (let i = 0; i < 10; i++) {//初始页面信息显示

let student = $("

" + "" + "" + (i + 1) + "" + "" + students[i].schoolNumber + "" + "" + students[i].name + "" + "" + students[i].academy + "" + "" + students[i].major + "" + ""

+ students[i].grade + "" + "" + students[i].class + "" + "" + students[i].age + "" + "");

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

" + "" + "" + (no + lpren + 1) + "" + "" + student.schoolNumber + "" + "" + student.name + "" + "" + student.academy + "" + "" + student.major + "" + ""

+ student.grade + "" + "" + student.class + "" + "" + student.age + "" + "");

/* let i = 0;

while (i < 10 && no + i < stuNumber) {

let student = $("

" + "" + "" + (no + i + 1) + "" + "" + students[no + i].schoolNumber + "" + "" + students[no + i].name + "" + "" + students[no + i].academy + "" + "" + students[no + i].major + "" + ""

+ students[no + i].grade + "" + "" + students[no + i].class + "" + "" + students[no + i].age + "" + "");

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

" + "" + "" + (modifyNumber - no + 1) + "" + "" + students[modifyNumber].schoolNumber + "" + "" + students[modifyNumber].name + "" + "" + students[modifyNumber].academy + "" + "" + students[modifyNumber].major + "" + ""

+ students[modifyNumber].grade + "" + "" + students[modifyNumber].class + "" + "" + students[modifyNumber].age + "" + "");

/*$("tbody tr:first").siblings().remove();//清空界面

for (let i = no; i < no+10; i++) {//初始页面信息显示

let student = $("

" + "" + "" + (i + 1) + "" + "" + students[i].schoolNumber + "" + "" + students[i].name + "" + "" + students[i].academy + "" + "" + students[i].major + "" + ""

+ students[i].grade + "" + "" + students[i].class + "" + "" + students[i].age + "" + "");

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

}

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

$("#sbg").removeClass("sbg");

$("#chasi").hide();

});

$(".cancel").click(function () {//多个取消按钮点击触发的动作

$("#sbg").removeClass("sbg");

$(".achaesi").hide();

});

$("tbody tr td:first").click(function () {//全选操作用到了JQuery的隐示迭代

$("tbody tr td input").prop("checked", $("tbody tr:first td:first input").prop("checked"));

});

$("tbody").on("click", $("tbody tr:nth-of-type(1)").siblings().find("input"), function () {

let isSelectAll = true;

$("tbody tr:nth-of-type(1)").siblings().find("input").each(function (index, domEle) {

if ($(domEle).prop("checked") == false)

isSelectAll = false;

});

$("tbody tr:first td:first input").prop("checked", isSelectAll);

})

let update = (no) => {

let i = 0;//用于增加信息条目的变量;

$("tbody tr:first").siblings().remove();//清空界面

while (i < 10 && no + i < stuNumber) {

let student = $("

" + "" + "" + (no + i + 1) + "" + "" + students[no + i].schoolNumber + "" + "" + students[no + i].name + "" + "" + students[no + i].academy + "" + "" + students[no + i].major + "" + ""

+ students[no + i].grade + "" + "" + students[no + i].class + "" + "" + students[no + i].age + "" + "");

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

i++;

}

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

}

$("#delete").click(function () {

if (confirm("确认要删除这些信息吗？")) {

let delNumber = 0;//删除的信息条目数;

let delIndexs = []; //删除信息条目的下标;用于后期处理避免“落空”导致移动无效

// let i = 0;//用于增加信息条目的变量;

$("tbody tr td input").each(function (index, domEle) {

if (index != 0 && $(domEle).prop("checked")) {//index != 0,防止标题行被删除

delIndexs[delIndexs.length] = $(domEle).parent().next().text() - 1;

$(domEle).parent().parent().remove();

delNumber++;

}

});

for (let j = delIndexs.length - 1; j >= 0; j--) {

for (let k = delIndexs[j]; k < stuNumber - 1; k++) {//低效的代码，需要大量移动对象索引;对JS不太熟悉，还没有想到高效的解决办法!

students[k] = students[k + 1];

}

}

stuNumber -= delNumber;//指向储存底层数据(学生对象)的数组尾部的指针“移动”

$("#en").text(stuNumber);//更新条目数

if (stuNumber == no) {

no -= 10;

page--;

$("#pgn").text(page);

}

update(no);

/* $("tbody tr:first").siblings().remove();//清空界面

while (i < 10 && no + i < stuNumber) {

let student = $("

" + "" + "" + (no + i + 1) + "" + "" + students[no + i].schoolNumber + "" + "" + students[no + i].name + "" + "" + students[no + i].academy + "" + "" + students[no + i].major + "" + ""

+ students[no + i].grade + "" + "" + students[no + i].class + "" + "" + students[no + i].age + "" + "");

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

i++;

}

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

$("tbody tr td:first input").prop("checked", false);

}

});

$("#nextpage").click(function () {

if (no + 10 < stuNumber) {

no += 10;

page++;

$("#pgn").text(page);

update(no);

$("tbody tr:first td:first input").prop("checked", false);

/*let i = 0;//用于增加信息条目的变量;

$("tbody tr:first").siblings().remove();//清空界面

while (i < 10 && no + i < stuNumber) {

let student = $("

" + "" + "" + (no + i + 1) + "" + "" + students[no + i].schoolNumber + "" + "" + students[no + i].name + "" + "" + students[no + i].academy + "" + "" + students[no + i].major + "" + ""

+ students[no + i].grade + "" + "" + students[no + i].class + "" + "" + students[no + i].age + "" + "");

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

i++;

}

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

} else {

alert("已经是最后一页。");

}

});

$("#lastpage").click(function () {

if (no - 10 >= 0) {

no -= 10;

page--;

$("#pgn").text(page);

update(no);

$("tbody tr:first td:first input").prop("checked", false);

/* let i = 0;//用于增加信息条目的变量;

$("tbody tr:first").siblings().remove();//清空界面

while (i < 10 && no + i < stuNumber) {

let student = $("

" + "" + "" + (no + i + 1) + "" + "" + students[no + i].schoolNumber + "" + "" + students[no + i].name + "" + "" + students[no + i].academy + "" + "" + students[no + i].major + "" + ""

+ students[no + i].grade + "" + "" + students[no + i].class + "" + "" + students[no + i].age + "" + "");

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

i++;

}

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

} else {

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

}

});

})

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

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

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

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

图2 新增界面

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

图3 修改界面

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

图4 查看

(5)其他要求

点击“删除”按钮，显示一个询问提示，如果选择是就删除当前行。可以多选删除，点击全选时是选择当前页所有学生。

隔行换色。

行的移入移出效果(hover)。

能够实现下一页和上一页的功能,不能翻页的时候给出提示。

展示出共有多少条数据，每页的数据条数，当前页数。

html5学生信息注册码,JavaScript+HTML实现学生信息管理系统代码示例相关推荐

  1. 输出教师信息c语言作业,C语言教师管理系统代码(最新整理)

    <C语言教师管理系统代码(最新整理)>由会员分享,可在线阅读,更多相关<C语言教师管理系统代码(最新整理)(7页珍藏版)>请在人人文库网上搜索. 1.include #incl ...

  2. php js特效代码如何用,Javascript实现吸顶特效（代码示例）

    本篇文章给大家带来的内容是Javascript实现吸顶特效(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 知识点 1.scroll家族和offset家族的结合运用 2. ...

  3. html5 图片局部马赛克,javascript - JS实现马赛克图片效果完整示例

    主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS实现马赛克图片效 ...

  4. 商业软件的注册码激活码的实现方法及代码示例（收藏备用）

    总第51篇 本文主要梳理一下软件注册码的实现方法,并给出简单的实现方式代码,供以后的项目参考,也方便在以后的项目中进一步延伸实现. 1.注册码的实现方式 目前大部分商业软件在提供注册码时,基本上采用了 ...

  5. 头像 HTML5 JSON PHP 摄像头,canvas之自定义头像功能实现代码示例

    写在最前: 前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的,没有安装过的还得手动去"允许"falsh的运行.所以让我用canvas实现一个一样的功能,嘿嘿,刚好最 ...

  6. html增加状态信息管理代码,JavaScript+HTML实现学生信息管理系统

    一.前言 用数组来存储所有学生对象的信息,实现了双向更新,初始时(数组内的对象信息"填充界面"),后面的界面操作可以更新数组内对象的信息(数量和本身数据域信息). 优点:JQuer ...

  7. HTML5期末大作业_影视网站设计——_指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

    HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常 ...

  8. HTML5期末大作业:影视网站设计——“指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

    HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常 ...

  9. HTML5期末大作业：商城页面——仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成...

    HTML5期末大作业:商城页面--仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末, 你 ...

最新文章

  1. 如何用JavaScript操作form表单组件？
  2. java 视频切片_关于视频播放、视频切片、跨域访问视频
  3. listview的divider边距
  4. Android 手电筒源码
  5. win10运行C语言的程序,win10系统运行软件提示应用程序发生异常0xc0000409的具体教程...
  6. OpenSSL使用3（基本原理及生成过程）（转）
  7. 2.2 Wrappers访问控制
  8. freemodbus源码/获取地址
  9. Java8 中用法优雅的 Stream，性能也优雅吗？
  10. Spring 基于注解(annotation)的配置之@Autowired注解
  11. 神经网络的激活函数、并通过python实现激活函数
  12. 找出数组中两数之和为指定值的所有整数对
  13. Ubuntu下RabbitMQ安装
  14. 给一张表加一个自动编号字段_Python办公自动化｜从Word到Excel
  15. 比特率和波特率的公式解析
  16. 如何防止亚马逊账号被关联？
  17. 「GoTeam 招聘时间」金山办公 WPS Go 中高级开发(广州/珠海）
  18. idea中*mapper.xml文件字体颜色变成黄色的解决办法
  19. 海龟如何保留米帝手机号
  20. 网易电脑版我的世界显示获取服务器列表失败,我的世界网易中国版无法游戏问题汇总[图]...

热门文章

  1. python time 时间差,python如何计算时间差
  2. ansys 内聚力模型_《ANSYS Workbench有限元分析实例详解(静力学)》,9787115446312
  3. 支架预压弹性变形值计算_现浇连续梁桥支架搭设及预压施工技术控制
  4. DELL服务器如何使用iDRAC安装操作系统
  5. 一个O-RAN YANG语言文件：o-ran-interfaces.yang
  6. TensorFlow中文社区
  7. Django模板：url反向解析
  8. linux a8启动过程,51CTO博客-专业IT技术博客创作平台-技术成就梦想
  9. CSS3 3D位移和旋转
  10. Django项目部署（nginx1.18+uwgsi）