学生信息管理系统之javascript版.docx
<!-建议在FirefoxChromeIE9+上运行(UTF-8编码)，至于为什么呢，请看下文一><!uthorcq.amin-><!-©基于javascript实现的学生管理系统，只为js初学者参考，大神请忽视吧<!-在实现呈现的时候，我运用现在比较火热的CSS框架bootstrap,效果很不错一<!DOCTYPEhtm1.><htm1.><head><tit1.e>StudentInfoManager<tit1.e><1inkre1.="sty1.esheet*type="text/CSS*href=,cssbootstrap.css")<1inkre1.="sty1.esheet*type=textcss*href=,cssbootstrap-responsive.css<scripttype=mtext/javascript*>var_data=,info_body,numReg=/*d+$/;String.prototype,trim=functionO(returnthis.rep1.ace(s*)I(s*$)/g,"");/依据ID找到Objfunction$(id)returndocument.getE1.ementBy1.d(id)：依据id找到学生functiongetStudentBy1.d(id)for(vari=0;i<_data.1.ength;i+)if(-datai.id=id)return_datai;returnnu1.1.;学生对象functionStudent(name,sex,age,score)this.id=newDateO.getTimeO;this,name=name?name:nu1.1.:this,age=age?age:0;this.sex=sex?sex:'0'this,score=score?score:0;/增加方法functionaddHand1.er()varstu=newStudentO：stu.name=$(,nName*).va1.ue,trim();stu.age=S(,nAge,).va1.ue,trim()：stu.score=$CnScore').va1.ue,trim();stu.sex=S(,nSe,).va1.ue,trim()：if(va1.id(stu)data,push(stu)：$CFesetButto11,).c1.ickO;ShowData(_data)：验证输入是否正确functionva1.id(student)if(student,name='')a1.ert('用户名不能为空!');returnfa1.se;if(student,age!='')if(numReg.test(student,age)vartemp=parse1.nt(student,age,10);if(temp<Otemp>200)a1.ertC年龄输入错误!);returnfa1.se;e1.seIa1.ertC年龄请输入数字!)；returnfa1.se;if(student,score!='')if(numReg.test(student,score)vartemp=parse1.nt(student,score);if(temp<0Itemp>100)a1.ert("成果输入错误!");e1.sea1.ert('成果输入错误!)：returnfa1.se;returntrue;/删除方法functiondeIHandIer(id)if(confinn('真的要删除吗？')vartemp=;for(vari=0;i<_data.1.ength;i÷+)if(-datai.id!=id)temp,push(datai);_data=temp;showData(-data);查询方法functionsearch(name,sex,age)/conso1.e,1.og(arguments);vartemp=;for(vari=0;i<_data.1.ength;1+)if(""!=name)if(.datai.nameI=name)continue;if(*!=sex)if(-datai.sex!=sex)continue;if("!=age)if(_datai.age!=age)continue;temp,push(-datai);showData(temp);依据数据显示内容(htm1.代码生成)functionShoWData(data)info_body=info_body$Cinfo-body'):varhtm1.=;for(vari=0;i<data.1.ength;i+)htm1.push('<tr>>);htm1.push('<td>>+datai.name÷,<td>>);htm1.push('<td>>+showSex(datai.sex)+'<td>>);htm1.pushC<td>>+datai.age+*<td>>);htm1.pushC<td>>+datai.score+'<td>>);htm1.pushC<td><buttonC1.aSS="btn''sty1.e=*margin-right:IOpx;"onc1.ick=*editHand1.er(this,+datai.id+'")”编辑<button><buttonCIaSS="b1.nbin-dangersty1.e=margin-right:10pxonc1.ick=*de1.Hand1.er(,+datai.id+',)”删除<button><td>>);htm1.pushC<tr>>);此处IE低版本不兼容(促进网络进步，请升级低版本IE吧)，因为IE下tbody标签的innerHTM1.为只读属性,要兼容请将上面代码的标签用document.Crea1.cE1.ement;进行创建，Id的innerHTM1.是可以进行操作的info_body.innerHTM1.=htm1.join("");functionshowSex(v)if(v)iff0,=v)return'男；e1.seif(,=v)return'女'；return'error'：functionCreateSexTag(v)if(,0,=v)return,<optionvaue="0">男<7。PtionXop1.ionva1.ue=*1.*><option>>e1.se(return'<optionVaIUe=T>女GoptionXoptionVaIUe="0"男/option)'/保存修改内容functionSaveEidted(id)varstu=newStudentO：stu.name=$('eNamc').va1.ue;stu.age=S(,ege,).va1.ue：stu.score=$CeScore').va1.ue:stu.sex=S(,eSe,).va1.ue;if(va1.id(stu)for(vari=0;i<_data.1ength;i+)if(-datai.id=id)(_datai=stu;showData(_data);break;/编辑functioneditHand1.er(obj,id)varpp=obj.parentNode.parentNode;vartds=pp.getE1ementSByTagName('td');vartemp=getStudc11tById(id);if(nu1.1.!=temp)(for(vari=0:i<tds.1.ength;i+)if(0=i)tdsi.innerHTM1.='<inputid="cNamc”StyIe="width:80px"type="tex1."VaIUe="'+temp,name+'if(1.=i)tdsi.innei'HTM1.='<se1.ectid="eSex"StyIC="wid1.h:60px;“'+createSexTag(temp,sex)+'<sc1.ect>>if(2=i)tdsi.inner1.1.TM1.='<inputid="eAge"type="text"Sty1.e="width:70px"Va1.Ue="'+temp,age+'"'；if(3=i)tdsi.inner1.1.TM1.='<inutid="eScore”type="text"StyIe="width:70px"VaIUe="'+temp,score+'if(4=i)tdsi.inner1.1.TM1.='<buttonc1.ass=*btn*one1ick=*saveEidted(,'+id÷,V)”>保存<bu1.ton><huttonc1.ass=*btn*OnC1.iCk="showData(_data)”>取消<button>'e1.sea1.ert('error!,)：<script><sty1.etype=vtext/css>*padding:0margin:0.s77epadc1.ing-1.eft:ZQatex1.a1.ign:right',.sinputwidth:1OOpxborder:IPX*eeeso1.idmargin-top:10px.ss/ec1.width:60?*;marginTop:10px.72pzrposition:/,¢7atre;f1.oat:et:1.eft:-.j;width:border:Ipxso1.idmargin:;<sty1.e><hcad><body><divs1.y1.e=zrposi1ion:fixed;WiChh:M;background:ffeeez-index:9999height:100pxoverf1.ow:hidden”><tab1.e><tr><tdC1.aSS="e",姓名：<td><td><inputtype="text*c1.ass=sinput”id=0IVAmd7><td><tc1.c1.ass="stit1.eStyIe="width:5<¾”>性别:Gtd><td><stdectid="sSex"c1ass="ss1.ect*><optionva1.ue=*<option><optinva1.ue=男/option><optionVa1.Ue=/女"option<sc1.cct><tddass=/打e/年龄:Gtd><td><inputtype="text"sty1e=*width:50px*c1.ass="sinput"id="sAge7><td><td> <inputtype="button"c1.ass=vbtnva1.ue="查询”onc1.ick=*search($(tsName').va1.ue,trim(),$('sSe,).va1.ue,trim(),$('sAge').va1.ue,trim()*><td><tr><tab1.e><form><tab1.ec1.ass="tabic"id="add-info<tr><tdWid1.h=70OO<inpu1.c1.ass=ninput"type="text"id="nName7><td><tdWidth=N0"sty1e=*vcrf1ow:hidden-,*><se1.ectid=nSexsty1.e=*width:80p,*><optionva1.ue="”/男/mion><optionVaIUe=7。女/option)<se1.ect><td><tdwidth=inputc1.ass=,11input,type="text*id=加彷e"7><td>< tdWidth=羽。<inpuic1.ass="ninput,type="text"id="Score)><td><td><inputtype="button“c1.ass="btn"va1.ue="添加"onc1.ick=z,addHand1.er()*><inputtype="reset"va1.ue=,reset*id="resetButton"SIyIC="disp1.ay:"we;”><td><tr><tab1.e><form><div><divsty1.e=*position:aZ>so7z/re：top:100pxbottom:<?：height:autowidth:autoIert:righI:overf1.ow:auto;”><tab1.ec1.ass="tab1.etab1.e-borderedtab1.e-hover,sty1.e=*position:abso1.ute,top:Opx7-index:2;"id="info-1.ist<thcad><tr>< tdWidth=Z的一姓名<td>< tdWidth=工0)性别<td>< tdWidth=软r>年龄<td>< tdWidth=成果<td>< 1.d>操作<1.d><tr><thcad><tbodyid="info-body><tbody><tab1.e><ciiv><body><htm1.><!-demo下载demo>
