html增加状态信息管理代码,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)。
能够实现下一页和上一页的功能,不能翻页的时候给出提示。
展示出共有多少条数据，每页的数据条数，当前页数。
到此这篇关于JavaScript+HTML实现学生信息管理系统的文章就介绍到这了,更多相关js+html实现学生信息管理系统内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
html增加状态信息管理代码,JavaScript+HTML实现学生信息管理系统相关推荐
- html5学生信息注册码,JavaScript+HTML实现学生信息管理系统代码示例
本篇文章小编给大家分享一下JavaScript+HTML实现学生信息管理系统代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 一.前言 用数组来 ...
- java查询学生信息_分别显示女生_女生学生基本信息的代码_java课程设计学生信息管理系统_毕业论文.doc...
java课程设计学生信息管理系统_毕业论文 学 号: 课 程 设 计 题 目学生信息管理系统学 院计算机科学与信息工程学院专 业金融信息化服务外包班 级学生姓名指导教师 2015年12月28日 课程设 ...
- 利用mysql做信息管理_利用MySql实现学生信息管理系统的后台数据管理
Vol.28No.4 Apr.2012 赤峰学院学报(自然科学版)Journal of Chifeng University (Natural Science Edition )第28卷第4期(下) ...
- 用python制作一个学生信息管理软件_python实现简单学生信息管理系统
python简单的学生信息管理系统-文件版,供大家参考,具体内容如下 功能如下 主函数部分 增加学生信息 修改学生信息 删除学生信息 查询学生 显示所有学生的信息 将数据录入文件 读取文件数据 学习文 ...
- c语言添加学生信息代码,《C语言-学生信息管理系统(代码)》.doc
X X 师 范 大 学 实 验 报 告 课 程 C语言课程设计 任课老师 学 号 姓 名 院 系 _______年______月至_______年_______月 注意事项 使用C语言,代码已在vs中 ...
- 学生信息管理C语言 密码,求学生信息管理系统C语言版
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 p=l->next; if(p) { printf("请你输入新学号(原来是%s):",p->data.num); sca ...
- python综合管理系统代码_《python学生信息管理系统》[52KB]PDF代码版下载-码农之家...
<python学生信息管理系统>是一本python相关的电子书资源,介绍了关于python.学生管理系统方面的内容,格式为PDF,资源大小52 KB,由26622451 提供,目前在&qu ...
- 课程设计————学生信息管理系统（包含历代思路和代码）
课程设计----学生管理系统(包含历代思路和代码) 一.前言 学生信息管理系统是我第一个独立完成的比较长的代码,也算是花费了一些心血,这个系统是我一点点把它从几百行的代码逐渐优化到上千行,功能从简单到 ...
- c语言学生信息管理ppt,学生信息管理系统(C语言、含代码解释).ppt
学生信息管理系统(C语言.含代码解释) 第3章 脂类代谢 脂类的分布与生理功能 脂类的消化与吸收 血脂 甘油三酯的中间代谢 类脂代谢 脂类代谢紊乱 3.1 脂类的分布和生理功能 3.1.1 脂类的分布 ...
最新文章
- java vector内存结构_Java 数据结构
- htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体。
- 《架构漫谈》阅读笔记
- 电脑编程教学_河东CNC产品零件编程培训量身定制课程大纲
- HBase 创建表/插入数据/查询数据命令
- Java中数组的地址问题(hashCode解析)：
- 选择Windows CE wince嵌入式操作系统 的十大理由
- Linux内核crypto子系统的调用逻辑
- DefaultMessageListenerContainer
- 《SQL高级应用和数据仓库基础（MySQL版）》作业 ·007
- FindBugs-IDEA图标说明
- 常用编码说明-GBKBIG5GB18030
- 2020 mse 清华_家长们看过来！2020年下半年剑桥MSE考试备考全攻略！
- 从零开始嵌入聊天机器人服务(小白适用)
- CentOS7.6安装MySQL5.7
- 重建致远OA系统的步骤
- 阿里云账号个人实名认证教程
- 使用python开发多人一对一聊天系统（文字聊天，视频通讯，文件传输）
- 网易云音乐信息爬取（存储为 csv文件）喜马拉雅音乐爬取
- 消遣时间的小程序有哪些？这3个好玩又有趣的游戏小程序送给你！
热门文章
- 大盘点 | 2020年5篇目标检测算法最佳综述
- 揭晓高速公路场景下计算机视觉与交通的秘密
- Machine Learning | (7) Scikit-learn的分类器算法-决策树(Decision Tree）
- 获取Android studio 中的模拟器的界面的点的坐标(Ubuntu)
- Geoderma：南土所梁玉婷组-施用粪肥土壤中抗生素抗性基因和金属抗性基因的共存机制...
- MPB：林科院袁志林组-提取杨树人工林土壤微生物菌体细胞的4种方法
- gg.gap：ggplot阶截断坐标轴的优秀完美解决方案
- pandas使用query函数查询dataframe指定数据列的内容（数值）不包含在特定列表中的数据行（not contain in list)
- R语言用户自定义函数的语法结构、编写自定义统计值计算函数（使用ifelse结构计算均值和标准差等）、编写自定义日期格式化（format）函数（switch函数使用不同分枝格式化日期数据）、应用自定函数
- R语言使用ggplot2包使用geom_violin函数绘制分组小提琴图(配置图例位置、移除图例)实战