资源描述
______________________________________________________________________________________________________________
<!-- 建议在Firefox\Chrome\IE9+上运行(UTF-8编码)，至于为什么呢，请看下文 -->
<!-- @Author cq.amin -->
<!-- @基于javascript实现的学生管理系统，只为js初学者参考，大神请忽略吧 -->
<!-- @在实现展现的时候，我使用现在比较火热的css框架bootstrap，效果很不错 -->
<!DOCTYPE html>
<html>
<head>
<title>Student Info Manager</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<script type="text/javascript">
var _data = [],info_body,numReg = /^\d+$/;
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
//根据ID找到obj
function $(id){
return document.getElementById(id);
}
//根据id找到学生
function getStudentById (id) {
for(var i=0;i<_data.length;i++){
if(_data[i].id == id){
return _data[i];
}
}
return null;
}
//学生对象
function Student(name,sex,age,score){
this.id = new Date().getTime();
this.name = name ? name : null;
this.age = age ? age : 0;
this.sex = sex ? sex : '0';
this.score = score ? score : 0;
}
//增加方法
function addHandler(){
var stu = new Student();
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);
}
//验证输入是否正确
function valid(student){
if(student.name == ''){
alert('用户名不能为空！');
return false;
}
if(student.age != ''){
if(numReg.test(student.age)){
var temp = parseInt(student.age,10);
if(temp<0 || temp >200){
alert('年龄输入错误!');
return false;
}
}else{
alert('年龄请输入数字!');
return false;
}
}
if(student.score != ''){
if(numReg.test(student.score)){
var temp = parseInt(student.score);
if(temp <0 || temp >100){
alert("成绩输入错误!");
return false;
}
}else{
alert('成绩输入错误!');
return false;
}
}
return true;
}
//删除方法
function delHandler(id){
if(confirm('真的要删除吗？')){
var temp = [];
for(var i=0;i<_data.length;i++){
if(_data[i].id != id){
temp.push(_data[i]);
}
}
_data = temp;
showData(_data);
}
}
//查询方法
function search(name,sex,age){
//console.log(arguments);
var temp = [];
for(var i=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代码生成）
function showData(data){
info_body = info_body || $('info-body');
var html = [];
for(var i=0;i<data.length;i++){
html.push('<tr>');
html.push('<td>'+data[i].name+'</td>');
html.push('<td>'+showSex(data[i].sex)+'</td>');
html.push('<td>'+ data[i].age+'</td>');
html.push('<td>'+data[i].score+'</td>');
html.push('<td><button class="btn" style="margin-right:10px;" onclick="editHandler(this,\''+data[i].id+'\')">编辑</button><button class="btn btn-danger" style="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("");
}
function showSex(v){
if(v){
if('0' == v){
return '男';
}else if('1' == v){
return '女';
}
}
return 'error';
}
function createSexTag(v){
if('0' == v){
return '<option value="0">男</option><option value="1">女</option>';
}else{
return '<option value="1">女</option><option value="0">男</option>';
}
}
//保存修改内容
function saveEidted(id) {
var stu = new Student();
stu.name = $('eName').value;
stu.age = $('eAge').value;
stu.score = $('eScore').value;
stu.sex = $('eSex').value;
if(valid(stu)){
for(var i=0;i<_data.length;i++){
if(_data[i].id == id){
_data[i] = stu;
showData(_data);
break;
}
}
}
}
//编辑
function editHandler(obj,id){
var pp = obj.parentNode.parentNode;
var tds = pp.getElementsByTagName('td');
var temp = getStudentById(id);
if(null != temp){
for(var i=0;i<tds.length;i++){
if(0 == i){
tds[i].innerHTML = '<input id="eName" style="width:80px" type="text" value="'+temp.name+'">';
}
if(1 == i){
tds[i].innerHTML = '<select id="eSex" style="width:60px;">'+createSexTag(temp.sex)+'</select>';
}
if(2 == i){
tds[i].innerHTML = '<input id="eAge" type="text" style="width:70px" value="'+temp.age+'">';
}
if(3 == i){
tds[i].innerHTML = '<input id="eScore" type="text" style="width:70px" value="'+temp.score+'">';
}
if(4 == i){
tds[i].innerHTML = '<button class="btn" onclick="saveEidted(\''+id+'\')">保存</button> <button class="btn" onclick="showData(_data)">取消</button>';
}
}
}else{
alert('error!');
}
}
</script>
<style type="text/css">
*{padding: 0;margin: 0;}
.stitle{padding-left: 20px;text-align: right;}
.sinput{width: 100px;border: 1px #eee solid;margin-top: 10px;}
.sslect{width:60px;margin-top: 10px;}
.ninput{position: relative;float: left;left:-5px;width: 100%;border: 1px solid #eee;margin: 0;}
</style>
</head>
<body>
<div style="position:fixed;width:100%;background:#eee;z-index:9999;height:100px;overflow:hidden;">
<table>
<tr>
<td class="stitle">姓名:</td>
<td><input type="text" class="sinput" id="sName"/></td>
<td class="stitle" style="width:50px;">性别:</td>
<td>
<select id="sSex" class="sslect">
<option value=""></option>
<option value="0">男</option>
<option value="1">女</option>
</select>
</td>
<td class="stitle">年龄:</td>
<td><input type="text" style="width:50px;" class="sinput" id="sAge"/></td>
<td> <input type="button" class="btn" value="查询" onclick="search($('sName').value.trim(),$('sSex').value.trim(),$('sAge').value.trim())"/></td>
</tr>
</table>
<form>
<table class="table" id="add-info">
<tr>
<td width="100"><input class="ninput" type="text" id="nName"/></td>
<td width="80" style="overflow:hidden;">
<select id="nSex" style="width:80px;">
<option value="0">男</option>
<option value="1">女</option>
</select>
</td>
<td width="80"><input class="ninput" type="text" id="nAge"/></td>
<td width="80"><input class="ninput" type="text" id="nScore"/></td>
<td>
<input type="button" class="btn" value="添加" onclick="addHandler()"/>
<input type="reset" value="reset" id="resetButton" style="display:none;"/>
</td>
</tr>
</table>
</form>
</div>
<div style="position:absolute;top:100px;bottom:0;height:auto;width:auto;left:0;right:0;overflow:auto;">
<table class="table table-bordered table-hover" style="position:absolute;top:0px;z-index:2;" id="info-list">
<thead>
<tr>
<td width="100">姓名</td>
<td width="80">性别</td>
<td width="80">年龄</td>
<td width="80">成绩</td>
<td>操作</td>
</tr>
</thead>
<tbody id="info-body">
</tbody>
</table>
</div>
</body>
</html>
<!-- demo下载 demo -->
Welcome To
Download !!!
欢迎您的下载，资料仅供参考！
精品资料
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
