还剩6页未读,继续阅读
文本内容:
!--建议在Firefox\Chrome\IE9+上运行UTF-8编码,至于为什么呢,请看下文--!--@Authorcq.amin--!--@基于javascript实现的学生管理系统,只为js初学者参考,大神请忽略吧--!--@在实现展现的时候,我使用现在比较火热的css框架bootstrap,效果很不错--!DOCTYPEhtmlhtmlheadtitleStudentInfoManager/titlelinkrel=stylesheettype=text/csshref=css/bootstrap.csslinkrel=stylesheettype=text/csshref=css/bootstrap-responsive.cssscripttype=text/javascriptvar_data=[]info_bodynumReg=/^\d+$/;String.prototype.trim=function{returnthis.replace/^\s*|\s*$/g;}//根据ID找到objfunction$id{returndocument.getElementByIdid;}//根据id找到学生functiongetStudentByIdid{forvari=0;i_data.length;i++{if_data[i].id==id{return_data[i];}}returnnull;}//学生对象functionStudentnamesexagescore{this.id=newDate.getTime;this.name=namename:null;this.age=ageage:0;this.sex=sexsex:0;this.score=scorescore:0;}//增加方法functionaddHandler{varstu=newStudent;stu.name=$nName.value.trim;stu.age=$nAge.value.trim;stu.score=$nScore.value.trim;stu.sex=$nSex.value.trim;ifvalidstu{_data.pushstu;$resetButton.click;}showData_data;}//验证输入是否正确functionvalidstudent{ifstudent.name=={alert用户名不能为空!;returnfalse;}ifstudent.age!={ifnumReg.teststudent.age{vartemp=parseIntstudent.age10;iftemp0||temp200{alert年龄输入错误!;returnfalse;}}else{alert年龄请输入数字!;returnfalse;}}ifstudent.score!={ifnumReg.teststudent.score{vartemp=parseIntstudent.score;iftemp0||temp100{alert成绩输入错误!;returnfalse;}}else{alert成绩输入错误!;returnfalse;}}returntrue;}//删除方法functiondelHandlerid{ifconfirm真的要删除吗?{vartemp=[];forvari=0;i_data.length;i++{if_data[i].id!=id{temp.push_data[i];}}_data=temp;showData_data;}}//查询方法functionsearchnamesexage{//console.logarguments;vartemp=[];forvari=0;i_data.length;i++{if!=name{if_data[i].name!=name{continue;}}if!=sex{if_data[i].sex!=sex{continue;}}if!=age{if_data[i].age!=age{continue;}}temp.push_data[i];}showDatatemp;}//根据数据显示内容(html代码生成)functionshowDatadata{info_body=info_body||$info-body;varhtml=[];forvari=0;idata.length;i++{html.pushtr;html.pushtd+data[i].name+/td;html.pushtd+showSexdata[i].sex+/td;html.pushtd+data[i].age+/td;html.pushtd+data[i].score+/td;html.pushtdbuttonclass=btnstyle=margin-right:10px;onclick=editHandlerthis\+data[i].id+\编辑/buttonbuttonclass=btnbtn-dangerstyle=margin-right:10px;onclick=delHandler\+data[i].id+\删除/button/td;html.push/tr;}//此处IE低版本不兼容(促进网络进步,请升级低版本IE吧),因为IE下tbody标签的innerHTML为只读属性,要兼容请将上面代码的标签用document.createElement;进行创建,td的innerHTML是可以进行操作的info_body.innerHTML=html.join;}functionshowSexv{ifv{if0==v{return男;}elseif1==v{return女;}}returnerror;}functioncreateSexTagv{if0==v{returnoptionvalue=0男/optionoptionvalue=1女/option;}else{returnoptionvalue=1女/optionoptionvalue=0男/option;}}//保存修改内容functionsaveEidtedid{varstu=newStudent;stu.name=$eName.value;stu.age=$eAge.value;stu.score=$eScore.value;stu.sex=$eSex.value;ifvalidstu{forvari=0;i_data.length;i++{if_data[i].id==id{_data[i]=stu;showData_data;break;}}}}//编辑functioneditHandlerobjid{varpp=obj.parentNode.parentNode;vartds=pp.getElementsByTagNametd;vartemp=getStudentByIdid;ifnull!=temp{forvari=0;itds.length;i++{if0==i{tds[i].innerHTML=inputid=eNamestyle=width:80pxtype=textvalue=+temp.name+;}if1==i{tds[i].innerHTML=selectid=eSexstyle=width:60px;+createSexTagtemp.sex+/select;}if2==i{tds[i].innerHTML=inputid=eAgetype=textstyle=width:70pxvalue=+temp.age+;}if3==i{tds[i].innerHTML=inputid=eScoretype=textstyle=width:70pxvalue=+temp.score+;}if4==i{tds[i].innerHTML=buttonclass=btnonclick=saveEidted\+id+\保存/buttonbuttonclass=btnonclick=showData_data取消/button;}}}else{alerterror!;}}/scriptstyletype=text/css*{padding:0;margin:0;}.stitle{padding-left:20px;text-align:right;}.sinput{width:100px;border:1px#eeesolid;margin-top:10px;}.sslect{width:60px;margin-top:10px;}.ninput{position:relative;float:left;left:-5px;width:100%;border:1pxsolid#eee;margin:0;}/style/headbodydivstyle=position:fixed;width:100%;background:#eee;z-index:9999;height:100px;overflow:hidden;tabletrtdclass=stitle姓名:/tdtdinputtype=textclass=sinputid=sName//tdtdclass=stitlestyle=width:50px;性别:/tdtdselectid=sSexclass=sslectoptionvalue=/optionoptionvalue=0男/optionoptionvalue=1女/option/select/tdtdclass=stitle年龄:/tdtdinputtype=textstyle=width:50px;class=sinputid=sAge//tdtdnbsp;inputtype=buttonclass=btnvalue=查询onclick=search$sName.value.trim$sSex.value.trim$sAge.value.trim//td/tr/tableformtableclass=tableid=add-infotrtdwidth=100inputclass=ninputtype=textid=nName//tdtdwidth=80style=overflow:hidden;selectid=nSexstyle=width:80px;optionvalue=0男/optionoptionvalue=1女/option/select/tdtdwidth=80inputclass=ninputtype=textid=nAge//tdtdwidth=80inputclass=ninputtype=textid=nScore//tdtdinputtype=buttonclass=btnvalue=添加onclick=addHandler/inputtype=resetvalue=resetid=resetButtonstyle=display:none;//td/tr/table/form/divdivstyle=position:absolute;top:100px;bottom:0;height:auto;width:auto;left:0;right:0;overflow:auto;tableclass=tabletable-borderedtable-hoverstyle=position:absolute;top:0px;z-index:2;id=info-listtheadtrtdwidth=100姓名/tdtdwidth=80性别/tdtdwidth=80年龄/tdtdwidth=80成绩/tdtd操作/td/tr/theadtbodyid=info-body/tbody/table/div/body/html!--demo下载demo--。