学生信息管理系统之javascript版.docx
学生信息管理系统之javascript版.docx
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 学生 信息管理 系统 javascript
- 资源描述：
-
______________________________________________________________________________________________________________ <!-- 建议在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 !!! 欢迎您的下载，资料仅供参考！ 精品资料展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/2304515.html