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

这篇文章主要介绍了Java脚本语言实现学生信息管理系统，文中有非常详细的代码示例，对正在学习射流研究…的小伙伴们有一定的帮助，需要的朋友可以参考下

一、前言

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

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

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

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

半铸钢钢性铸铁(铸造半钢)部分——界面的缩放存在问题。(没打算走前端/暂时懒得修改)。

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

二、效果图

三、代码

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

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

HTML:

！文档类型超文本标记语言

html lang='en '

头

meta charset='UTF-8 '

标题学生信息管理系统/标题

脚本src='./././JQuery/JQuery.js'/script

链接版本='样式表href='./studentinformationmanagement system CSS/studentinformationmanagement system。CSS ' rel='外部无跟随'

脚本src='./studentinformationmanagement system js/studentinformationmanagement system。js '/脚本

/头

身体

差异

页眉

人力资源/

氕学生信息管理系统/h1

人力资源/

/页眉

主要的

差异

div id='adbt '

按钮class='gre' id='add '新增/按钮

按钮class='red' id='删除'删除/按钮

/div

桌子

tbody

tr id='thead '

tdinput type='checkbox'/td

（美)财政部(财政部)序号/td

（美)财政部(财政部)学号/td

（美)财政部(财政部)姓名/td

（美)财政部(财政部)学院/td

（美)财政部(财政部)专业/td

（美)财政部(财政部)年级/td

（美)财政部(财政部)班级/td

（美)财政部(财政部)年龄/td

（美)财政部(财政部)操作/td

/tr

！- tr

td name='abc '输入类型='复选框'/td

td1/td

td11503080201/td

（美)财政部(财政部)张三/td

（美)财政部(财政部)计算机科学与工程学院/td

（美)财政部(财政部)软件工程/td

td2015/td

td2/td

td21/td

tda href='#' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部nofollow' rel='外部“不跟随”查看/a href=' # rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'修改/a/td

/tr

tdinput type='checkbox'/td

td2/td

td11503080202/td

（美)财政部(财政部)李四/td

（美)财政部(财政部)会计学院/td

（美)财政部(财政部)会计学/td

td2015/td

td1/td

td19/td

/tr

tdinput type='checkbox'/td

td3/td

td11503080203/td

（美)财政部(财政部)王二/td

（美)财政部(财政部)理学院/td

（美)财政部(财政部)数学/td

td2015/td

td1/td

td19/td

/tr

tdinput type='checkbox'/td

td4/td

td11503080204/td

（美)财政部(财政部)张三/td

（美)财政部(财政部)计算机科学与工程学院/td

（美)财政部(财政部)软件工程/td

td2015/td

td2/td

td21/td

/tr

tdinput type='checkbox'/td

td5/td

td11503080205/td

（美)财政部(财政部)李四/td

（美)财政部(财政部)会计学院/td

（美)财政部(财政部)会计学/td

td2015/td

td1/td

td19/td

/tr

tdinput type='checkbox'/td

td6/td

td11503080206/td

（美)财政部(财政部)王二/td

（美)财政部(财政部)理学院/td

（美)财政部(财政部)数学/td

td2015/td

td1/td

td19/td

/tr

tdinput type='checkbox'/td

td7/td

td11503080207/td

（美)财政部(财政部)张三/td

（美)财政部(财政部)计算机科学与工程学院/td

（美)财政部(财政部)软件工程/td

td2015/td

td2/td

td21/td

/tr

tdinput type='checkbox'/td

td8/td

td11503080208/td

（美)财政部(财政部)李四/td

（美)财政部(财政部)会计学院/td

（美)财政部(财政部)会计学/td

td2015/td

td1/td

td19/td

/tr

tdinput type='checkbox'/td

td9/td

td11503080209/td

（美)财政部(财政部)王二/td

（美)财政部(财政部)理学院/td

（美)财政部(财政部)数学/td

td2015/td

td1/td

td19/td

/tr

tdinput type='checkbox'/td

td10/td

td11503080210/td

（美)财政部(财政部)张三/td

（美)财政部(财政部)计算机科学与工程学院/td

（美)财政部(财政部)软件工程/td

td2015/td

td2/td

td21/td

/tr -

/tbody

/表格

div id='导航'

p第span id='pgn'/span页，共span id='en'/span条（每页最多显示10条)/p！-条目数量-

div id='tpbt '

button class='gre' id='lastpage '上一页/按钮

button class='red' id='nextpage '下一页/按钮

/div

/main

/div

div id='sbg'/div！-增删改查时的阴影背景-

div class='achaesi' id='asi '

！- form action='' method='post' -

氘新增学生信息/h2

div class='ifm '

='assn '的分割标签学号/label input id=' assn ' type=' text ' placeholder=' 11503080201 ' required=' required ' maxlength=' 11 ' pattern='^[0-9]{11}$' on invalid=' setcustomvalidity('请输入11位的数字组合)'/div

='asn '的分割标签姓名/标签输入id=' ASN ' type=' text ' placeholder='雷军required=' required ' minlength=' 2 ' maxlength=' 8 ' pattern='^[\u4e00-\u9fa5]$ ' on invalid=' setcustomvalidity('请输入正确的姓名)'/div

='asac '的分割标签学院/label input id=' asac ' type=' text ' placeholder='两江人工智能学院required=' required ' minlength=' 3 ' maxlength=' 10 ' pattern='^[\u4e00-\u9fa5]$ ' on invalid=' setcustomvalidity('请输入正确的学院名)'/div

='asm '的分割标签专业& amp

lt;/label> <input id="asm" type="text" placeholder="软件工程" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的专业名')"></div> <div><label for="asg">年级</label> <input id="asg" type="text" placeholder="2015" required="required" max="2020" maxlength="4" pattern="^[0-9]{4}$" oninvalid="setCustomValidity('请输入正确的年级')"></div> <div><label for="asc">班级</label> <input id="asc" type="text" placeholder="1" required="required" maxlength="1"></div> <div><label for="asag">年龄</label> <input id="asag" type="number" placeholder="20" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('请输入正确的年龄')"></div> </div> <hr/> <div class="scbt"> <button type="submit" id="submit">提交</button> <button class="cancel">取消</button> </div>  </div> <div class="achaesi" id="chasi">  <h2>修改学生信息</h2> <div class="ifm"> <div><label for="chassn">学号</label> <input id="chassn" type="text" readonly required="required" maxlength="11" pattern="^[0-9]{11}$" oninvalid="setCustomValidity('请输入11位的数字组合')"></div> <div><label for="chasn">姓名</label> <input id="chasn" type="text" required="required" minlength="2" maxlength="8" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的姓名')"></div> <div><label for="chasac">学院</label> <input id="chasac" type="text" required="required" minlength="3" maxlength="10" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的学院名')"></div> <div><label for="chasm">专业</label> <input id="chasm" type="text" required="required" minlength="3" maxlength="12" pattern="^[\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('请输入正确的专业名')"></div> <div><label for="chasg">年级</label> <input id="chasg" type="text" required="required" max="2020" maxlength="4" pattern=^[0-9]{4}$" oninvalid="setCustomValidity('请输入正确的年级')"></div> <div><label for="chasc">班级</label> <input id="chasc" type="text" required="required" maxlength="1"></div> <div><label for="chasag">年龄</label> <input id="chasag" type="text" required="required" min="0" maxlength="2" pattern="^[0-9]+$" oninvalid="setCustomValidity('请输入正确的年龄')"></div> </div> <hr/> <div class="scbt"> <button type="submit" id="save">保存</button> <button class="cancel">取消</button> </div>  </div> <div class="achaesi" id="chesi"> <h2>查看学生信息</h2> <div class="ifm"> <div><label for="chessn">学号</label> <input type="text" readonly id="chessn"></div> <div><label for="chesn">姓名</label> <input type="text" readonly id="chesn"></div> <div><label for="chesac">学院</label> <input type="text" readonly id="chesac"></div> <div><label for="chesm">专业</label> <input type="text" readonly id="chesm"></div> <div><label for="chesg">年级</label> <input type="text" readonly id="chesg"></div> <div><label for="chesc">班级</label> <input type="text" readonly id="chesc"></div> <div><label for="chesag">年龄</label> <input type="text" readonly id="chesag"></div> </div> <hr/> <div class="scbt"> <button class="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 = [{//初始界面数据 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 = $("<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++) {//初始页面信息显示 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>" + "</tr>"); $("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 = $("<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++; } $("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 = $("<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++; } $("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 = $("<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++; } $("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 = $("<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++; } $("tbody").trigger("create");*/ } else { alert("已经是第一页。"); } }); })

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

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

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

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

图2 新增界面

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

图3 修改界面

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

图4 查看

（5）其他要求

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

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

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

目录

一、前言

二、效果图

三、代码

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

相关文章阅读