学生信息管理系统之javascript版.docx

学生信息管理系统之javascript版.docx

《学生信息管理系统之javascript版.docx》由会员分享，可在线阅读，更多相关《学生信息管理系统之javascript版.docx（8页珍藏版）》请在冰豆网上搜索。

--建议在Firefox\Chrome\IE9+上运行（UTF-8编码），至于为什么呢，请看下文-->

--@Authorcq.amin-->

--@基于javascript实现的学生管理系统，只为js初学者参考，大神请忽略吧-->

--@在实现展现的时候，我使用现在比较火热的css框架bootstrap，效果很不错-->

DOCTYPEhtml>

var_data=[],info_body,numReg=/^\d+$/;

String.prototype.trim=function（）{

returnthis.replace（/（^\s*）|（\s*$）/g,""）;

}

//根据ID找到obj

function$（id）{

returndocument.getElementById（id）;

}

//根据id找到学生

functiongetStudentById（id）{

for（vari=0;i<_data.length;i++）{

if（_data[i].id==id）{

return_data[i];

}

}

returnnull;

}

//学生对象

functionStudent（name,sex,age,score）{

this.id=newDate（）.getTime（）;

this.name=name?

name:

null;

this.age=age?

age:

0;

this.sex=sex?

sex:

'0';

this.score=score?

score:

0;

}

//增加方法

functionaddHandler（）{

varstu=newStudent（）;

stu.name=$（'nName'）.value.trim（）;

stu.age=$（'nAge'）.value.trim（）;

stu.score=$（'nScore'）.value.trim（）;

stu.sex=$（'nSex'）.value.trim（）;

if（valid（stu））{

_data.push（stu）;

$（'resetButton'）.click（）;

}

showData（_data）;

}

//验证输入是否正确

functionvalid（student）{

if（student.name==''）{

alert（'用户名不能为空！

'）;

returnfalse;

}

if（student.age!

=''）{

if（numReg.test（student.age））{

vartemp=parseInt（student.age,10）;

if（temp<0||temp>200）{

alert（'年龄输入错误!

'）;

returnfalse;

}

}else{

alert（'年龄请输入数字!

'）;

returnfalse;

}

}

if（student.score!

=''）{

if（numReg.test（student.score））{

vartemp=parseInt（student.score）;

if（temp<0||temp>100）{

alert（"成绩输入错误!

"）;

returnfalse;

}

}else{

alert（'成绩输入错误!

'）;

returnfalse;

}

}

returntrue;

}

//删除方法

functiondelHandler（id）{

if（confirm（'真的要删除吗？

'））{

vartemp=[];

for（vari=0;i<_data.length;i++）{

if（_data[i].id!

=id）{

temp.push（_data[i]）;

}

}

_data=temp;

showData（_data）;

}

}

//查询方法

functionsearch（name,sex,age）{

//console.log（arguments）;

vartemp=[];

for（vari=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]）;

}

showData（temp）;

}

//根据数据显示内容（html代码生成）

functionshowData（data）{

info_body=info_body||$（'info-body'）;

varhtml=[];

for（vari=0;i

html.push（''）;

html.push（''+data[i].name+''）;

html.push（''+showSex（data[i].sex）+''）;

html.push（''+data[i].age+''）;

html.push（''+data[i].score+''）;

html.push（'

10px;"onclick="editHandler（this,\''+data[i].id+'\'）">编辑

10px;"onclick="delHandler（\''+data[i].id+'\'）">删除'）;

html.push（''）;

}

//此处IE低版本不兼容（促进网络进步，请升级低版本IE吧），因为IE下tbody标签的innerHTML为只读属性，要兼容请将上面代码的标签用document.createElement（''）;进行创建，td的innerHTML是可以进行操作的

info_body.innerHTML=html.join（""）;

}

functionshowSex（v）{

if（v）{

if（'0'==v）{

return'男';

}elseif（'1'==v）{

return'女';

}

}

return'error';

}

functioncreateSexTag（v）{

if（'0'==v）{

return'男女';

}else{

return'女男';

}

}

//保存修改内容

functionsaveEidted（id）{

varstu=newStudent（）;

stu.name=$（'eName'）.value;

stu.age=$（'eAge'）.value;

stu.score=$（'eScore'）.value;

stu.sex=$（'eSex'）.value;

if（valid（stu））{

for（vari=0;i<_data.length;i++）{

if（_data[i].id==id）{

_data[i]=stu;

showData（_data）;

break;

}

}

}

}

//编辑

functioneditHandler（obj,id）{

varpp=obj.parentNode.parentNode;

vartds=pp.getElementsByTagName（'td'）;

vartemp=getStudentById（id）;

if（null!

=temp）{

for（vari=0;i

if（0==i）{

tds[i].innerHTML='

80px"type="text"value="'+temp.name+'">';

}

if（1==i）{

tds[i].innerHTML='

60px;">'+createSexTag（temp.sex）+'';

}

if（2==i）{

tds[i].innerHTML='

70px"value="'+temp.age+'">';

}

if（3==i）{

tds[i].innerHTML='