JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)

上傳人：我*** IP屬地：四川上傳時(shí)間：2025-05-16 格式：DOCX 頁(yè)數(shù)：27 大?。?1.42KB 積分：15 舉報(bào) 版權(quán)申訴

JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)_第2頁(yè)

JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)_第3頁(yè)

JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)_第4頁(yè)

JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)_第5頁(yè)

已閱讀5頁(yè)，還剩22頁(yè)未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)目錄一、前言二、效果圖三、代碼四、學(xué)生信息管理系統(tǒng)主界面

一、前言

用數(shù)組來(lái)存儲(chǔ)所有學(xué)生對(duì)象的信息，實(shí)現(xiàn)了雙向更新，初始時(shí)（數(shù)組內(nèi)的對(duì)象信息“填充界面”），后面的界面操作可以更新數(shù)組內(nèi)對(duì)象的信息（數(shù)量和本身數(shù)據(jù)域信息）。

優(yōu)點(diǎn)：JQuery代碼處理的許多細(xì)節(jié)較好。

使用HTML5的pattern+正則表達(dá)式，實(shí)現(xiàn)表單驗(yàn)證以及相應(yīng)提示。

缺點(diǎn)：后臺(tái)刪除學(xué)生對(duì)象的信息代碼處理效率較低（“假”刪除：移動(dòng)學(xué)生對(duì)象索引的位置+變換數(shù)組長(zhǎng)度）。

CSS部分——界面的縮放存在問(wèn)題。（沒(méi)打算走前端/暫時(shí)懶得修改）。.

部分代碼可以更好的處理已達(dá)到復(fù)用的目的，未處理。

二、效果圖

三、代碼

沒(méi)有刪去寫代碼過(guò)程中做改進(jìn)之前的代碼，看上去代碼有點(diǎn)長(zhǎng)（保留了寫代碼的思考過(guò)程）

刪去注釋了的代碼以及一些不必要的內(nèi)容，代碼也不是太長(zhǎng)。

HTML:

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleStudentInformationManagementSystem/title

scriptsrc="../../../JQuery/JQuery.js"/script

linkrel="stylesheet"href="../studentInformationManagementSystemCss/studentInformationManagementSystem.css"rel="externalnofollow"

scriptsrc="../studentInformationManagementSystemJs/studentInformationManagementSystem.js"/script

/head

body

div

header

hr/

h1學(xué)生信息管理系統(tǒng)/h1

hr/

/header

main

div

divid="adbt"

buttonid="add"新增/button

buttonid="delete"刪除/button

/div

table

tbody

trid="thead"

tdinputtype="checkbox"/td

td序號(hào)/td

td學(xué)號(hào)/td

td姓名/td

td學(xué)院/td

td專業(yè)/td

td年級(jí)/td

td班級(jí)/td

td年齡/td

td操作/td

/tr

!--tr

tdname="abc"inputtype="checkbox"/td

td1/td

td11503080201/td

td張三/td

td計(jì)算機(jī)科學(xué)與工程學(xué)院/td

td軟件工程/td

td2015/td

td2/td

td21/td

tdahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"查看/aahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"修改/a/td

/tr

tdinputtype="checkbox"/td

td2/td

td11503080202/td

td李四/td

td會(huì)計(jì)學(xué)院/td

td會(huì)計(jì)學(xué)/td

td2015/td

td1/td

td19/td

/tr

tdinputtype="checkbox"/td

td3/td

td11503080203/td

td王二/td

td理學(xué)院/td

td數(shù)學(xué)/td

td2015/td

td1/td

td19/td

/tr

tdinputtype="checkbox"/td

td4/td

td11503080204/td

td張三/td

td計(jì)算機(jī)科學(xué)與工程學(xué)院/td

td軟件工程/td

td2015/td

td2/td

td21/td

/tr

tdinputtype="checkbox"/td

td5/td

td11503080205/td

td李四/td

td會(huì)計(jì)學(xué)院/td

td會(huì)計(jì)學(xué)/td

td2015/td

td1/td

td19/td

/tr

tdinputtype="checkbox"/td

td6/td

td11503080206/td

td王二/td

td理學(xué)院/td

td數(shù)學(xué)/td

td2015/td

td1/td

td19/td

/tr

tdinputtype="checkbox"/td

td7/td

td11503080207/td

td張三/td

td計(jì)算機(jī)科學(xué)與工程學(xué)院/td

td軟件工程/td

td2015/td

td2/td

td21/td

/tr

tdinputtype="checkbox"/td

td8/td

td11503080208/td

td李四/td

td會(huì)計(jì)學(xué)院/td

td會(huì)計(jì)學(xué)/td

td2015/td

td1/td

td19/td

/tr

tdinputtype="checkbox"/td

td9/td

td11503080209/td

td王二/td

td理學(xué)院/td

td數(shù)學(xué)/td

td2015/td

td1/td

td19/td

/tr

tdinputtype="checkbox"/td

td10/td

td11503080210/td

td張三/td

td計(jì)算機(jī)科學(xué)與工程學(xué)院/td

td軟件工程/td

td2015/td

td2/td

td21/td

/tr--

/tbody

/table

divid="navigate"

p第spanid="pgn"/span頁(yè),共spanid="en"/span條(每頁(yè)最多顯示10條)/p!--Numberofentries--

divid="tpbt"

buttonid="lastpage"上一頁(yè)/button

buttonid="nextpage"下一頁(yè)/button

/div

/main

/div

divid="sbg"/div!--增刪改查時(shí)的陰影背景--

divid="asi"

!--formaction=""method="post"--

h2新增學(xué)生信息/h2

div

divlabelfor="assn"學(xué)號(hào)/labelinputid="assn"type="text"placeholder="11503080201"required="required"maxlength="11"pattern="^[0-9]{11}$"oninvalid="setCustomValidity('請(qǐng)輸入11位的數(shù)字組合')"/div

divlabelfor="asn"姓名/labelinputid="asn"type="text"placeholder="雷軍"required="required"minlength="2"maxlength="8"pattern="^[\u4e00-\u9fa5]+$"oninvalid="setCustomValidity('請(qǐng)輸入正確的姓名')"/div

divlabelfor="asac"學(xué)院/labelinputid="asac"type="text"placeholder="兩江人工智能學(xué)院"required="required"minlength="3"maxlength="10"pattern="^[\u4e00-\u9fa5]+$"oninvalid="setCustomValidity('請(qǐng)輸入正確的學(xué)院名')"/div

divlabelfor="asm"專業(yè)/labelinputid="asm"type="text"placeholder="軟件工程"required="required"minlength="3"maxlength="12"pattern="^[\u4e00-\u9fa5]+$"oninvalid="setCustomValidity('請(qǐng)輸入正確的專業(yè)名')"/div

divlabelfor="asg"年級(jí)/labelinputid="asg"type="text"placeholder="2015"required="required"max="2025"maxlength="4"pattern="^[0-9]{4}$"oninvalid="setCustomValidity('請(qǐng)輸入正確的年級(jí)')"/div

divlabelfor="asc"班級(jí)/labelinputid="asc"type="text"placeholder="1"required="required"maxlength="1"/div

divlabelfor="asag"年齡/labelinputid="asag"type="number"placeholder="20"required="required"min="0"maxlength="2"pattern="^[0-9]+$"oninvalid="setCustomValidity('請(qǐng)輸入正確的年齡')"/div

/div

hr/

div

buttontype="submit"id="submit"提交/button

button取消/button

/div

!--/form--

/div

divid="chasi"

!--formaction=""method="post"--

h2修改學(xué)生信息/h2

div

divlabelfor="chassn"學(xué)號(hào)/labelinputid="chassn"type="text"readonlyrequired="required"maxlength="11"pattern="^[0-9]{11}$"oninvalid="setCustomValidity('請(qǐng)輸入11位的數(shù)字組合')"/div

divlabelfor="chasn"姓名/labelinputid="chasn"type="text"required="required"minlength="2"maxlength="8"pattern="^[\u4e00-\u9fa5]+$"oninvalid="setCustomValidity('請(qǐng)輸入正確的姓名')"/div

divlabelfor="chasac"學(xué)院/labelinputid="chasac"type="text"required="required"minlength="3"maxlength="10"pattern="^[\u4e00-\u9fa5]+$"oninvalid="setCustomValidity('請(qǐng)輸入正確的學(xué)院名')"/div

divlabelfor="chasm"專業(yè)/labelinputid="chasm"type="text"required="required"minlength="3"maxlength="12"pattern="^[\u4e00-\u9fa5]+$"oninvalid="setCustomValidity('請(qǐng)輸入正確的專業(yè)名')"/div

divlabelfor="chasg"年級(jí)/labelinputid="chasg"type="text"required="required"max="2025"maxlength="4"pattern=^[0-9]{4}$"oninvalid="setCustomValidity('請(qǐng)輸入正確的年級(jí)')"/div

divlabelfor="chasc"班級(jí)/labelinputid="chasc"type="text"required="required"maxlength="1"/div

divlabelfor="chasag"年齡/labelinputid="chasag"type="text"required="required"min="0"maxlength="2"pattern="^[0-9]+$"oninvalid="setCustomValidity('請(qǐng)輸入正確的年齡')"/div

/div

hr/

div

buttontype="submit"id="save"保存/button

button取消/button

/div

!--/form--

/div

divid="chesi"

h2查看學(xué)生信息/h2

div

divlabelfor="chessn"學(xué)號(hào)/labelinputtype="text"readonlyid="chessn"/div

divlabelfor="chesn"姓名/labelinputtype="text"readonlyid="chesn"/div

divlabelfor="chesac"學(xué)院/labelinputtype="text"readonlyid="chesac"/div

divlabelfor="chesm"專業(yè)/labelinputtype="text"readonlyid="chesm"/div

divlabelfor="chesg"年級(jí)/labelinputtype="text"readonlyid="chesg"/div

divlabelfor="chesc"班級(jí)/labelinputtype="text"readonlyid="chesc"/div

divlabelfor="chesag"年齡/labelinputtype="text"readonlyid="chesag"/div

/div

hr/

div

button取消/button

/div

/body

/html

CSS:

margin:0;

padding:0;

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:rownowrap;

justify-content:space-between;

headerh1{

color:#9a9897;

headerhr{

margin:20px20px0;

background-color:#bc9470;

border:2pxsolid#bc9470;

width:30%;

height:0;

main#adbt{

margin-left:70px;

mainbutton{

margin:20px5px;

width:85px;

height:40px;

color:white;

mainbutton.gre{

background-color:#5cb85c;

mainbutton.red{

background-color:#d9534f;

main#navigate{

padding:070px;

display:flex;

flex-flow:rownowrap;

justify-content:space-between;

main#navigatep{

margin-top:30px;

table{

margin:0auto;

width:90%;

text-align:center;

border-spacing:0;

tabletbodytr:first-of-type{

background-color:#dadee1!important;

height:60px;

tabletbodytr{

height:45px;

tabletbodytr:nth-child(odd){

background-color:#eef1f8;

tabletbodytr:nth-child(even){

background-color:#ffffff;

tabletbodytr: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;

.achaesih2{

padding:5px20px;

font-size:large;

background-color:#555555;

color:white;

.achaesi.ifm{

width:300px;

margin:10pxauto;

display:flex;

flex-flow:columnnowrap;

.achaesi.ifmdiv{

margin:10px;

.achaesi.ifmdivinput{

width:220px;

height:20px;

.achaesi.scbt{

float:right;

margin-top:6px;

margin-right:30px;

.achaesi.scbtbutton:first-of-type{

width:85px;

height:36px;

background-color:#5cb85c;

.achaesi.scbtbutton:last-of-type{

width:85px;

height:36px;

background-color:white;

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

JS:

$(function(){

letstudents=[{//初始界面數(shù)據(jù)

schoolNumber:"11503080201",

name:"雷軍",//myidol

academy:"兩江人工智能學(xué)院",

major:"軟件工程",

grade:2025,

class:2,

age:20,

},{

schoolNumber:"11503080202",

name:"張三",

academy:"計(jì)算機(jī)工程與技術(shù)學(xué)院",

major:"計(jì)算機(jī)科學(xué)與技術(shù)",

grade:2025,

class:1,

age:19,

},{

schoolNumber:"11503080203",

name:"李四",

academy:"會(huì)計(jì)學(xué)院",

major:"會(huì)計(jì)學(xué)",

grade:2025,

class:3,

age:19,

},{

schoolNumber:"11503080204",

name:"王五",

academy:"理學(xué)院",

major:"應(yīng)用物理",

grade:2017,

class:3,

age:21,

},{

schoolNumber:"11503080204",

name:"趙六",

academy:"會(huì)計(jì)學(xué)院",

major:"金融學(xué)",

grade:2017,

class:3,

age:21,

},{

schoolNumber:"11503080202",

name:"張三",

academy:"計(jì)算機(jī)工程與技術(shù)學(xué)院",

major:"計(jì)算機(jī)科學(xué)與技術(shù)",

grade:2025,

class:1,

age:19,

},{

schoolNumber:"11503080203",

name:"李四",

academy:"會(huì)計(jì)學(xué)院",

major:"會(huì)計(jì)學(xué)",

grade:2025,

class:3,

age:19,

},{

schoolNumber:"11503080204",

name:"王五",

academy:"理學(xué)院",

major:"應(yīng)用物理",

grade:2017,

class:3,

age:21,

},{

schoolNumber:"11503080204",

name:"趙六",

academy:"會(huì)計(jì)學(xué)院",

major:"金融學(xué)",

grade:2017,

class:3,

age:21,

},{

schoolNumber:"11503080202",

name:"張三",

academy:"計(jì)算機(jī)工程與技術(shù)學(xué)院",

major:"計(jì)算機(jī)科學(xué)與技術(shù)",

grade:2025,

class:1,

age:19,

},{

schoolNumber:"11503080203",

name:"李四",

academy:"會(huì)計(jì)學(xué)院",

major:"會(huì)計(jì)學(xué)",

grade:2025,

class:3,

age:19,

},{

schoolNumber:"11503080204",

name:"王五",

academy:"理學(xué)院",

major:"應(yīng)用物理",

grade:2017,

class:3,

age:21,

},{

schoolNumber:"11503080204",

name:"趙六",

academy:"會(huì)計(jì)學(xué)院",

major:"金融學(xué)",

grade:2017,

class:3,

age:21,

letpage=1;//第幾頁(yè)

letno=0;//顯示的頁(yè)數(shù)的第一個(gè)對(duì)象是數(shù)組中的第幾個(gè)對(duì)象，初始下標(biāo)為0

letstuNumber=students.length;

for(leti=0;ii++){//初始頁(yè)面信息顯示

letstudent=$("tr"+"tdinputtype=\"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"+"tdahref=\"javascript:;\""check\"查看/aahref=\"javascript:;\""modify\"修改/a/td"+"/label/tr

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

$("tbody").trigger("create");//trigger()方法觸發(fā)被選元素上指定的事件以及事件的默認(rèn)行為（比如表單提交）

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

$("#en").text(stuNumber);

$("#add").click(function(){//點(diǎn)擊新增按鈕觸發(fā)的動(dòng)作

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

$("#asi").show();

letobjKeys=["schoolNumber","name","academy","major","grade","class","age"];

$("#submit").click(function(){//提交按鈕點(diǎn)擊觸發(fā)的動(dòng)作

letstudent={};

letisEmpty=false;

$("#asi").find("input").each(function(index,domEle){

if(!domEle.value){//如果添加時(shí)表單內(nèi)有值為空，則不進(jìn)行添加

isEmpty=true;

/*return;*/

student[objKeys[index]]=domEle.value;

if(!isEmp

人人文庫(kù)> 全部分類> 辦公材料 > 辦公文檔

溫馨提示

1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

JavaScript+HTML實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔