J2EE复习(三)JavaScript(下)--实战应用
动态增删改Table表格一、用js做的表格动态增删查改
工具JavaScript：util.js
//全选反选function checkAll(boxName) { var checkBox = document.getElementsByName(boxName); for (i = 0; i < checkBox.length; i++) { var checked = checkBox.checked; if (checked) { checkBox.checked = false; } else { checkBox.checked = true; } }}//多选验证function multiCheck(idArray){ //var idArray = document.getElementsByName(boxName); var count = 0; for(i=0;i<idArray.length;i++) { if(idArray.checked) { count++; } } return count;}//回车切换焦点function toNext(next){ if(event.keyCode==13) { next.focus(); }}//打开右键菜单function openShortCutMenu(oRow){// 选中当前行SelectRow(oRow);aOpenPopMenu("ShortCutMenu");event.cancelBubble = true;event.returnValue = false;}//关闭右键菜单function CloseShortCutMenu(){ aClosePopMenu("ShortCutMenu");}//显示右键菜单function aOpenPopMenu(MenuId){ if (document.all(MenuId)){ document.all(MenuId).style.left = event.clientX + document.body.scrollLeft; document.all(MenuId).style.top = event.clientY + document.body.scrollTop; document.all(MenuId).style.display = ""; }}//隐藏右键菜单function aClosePopMenu(MenuId){ if (document.all(MenuId)){ document.all(MenuId).style.display = "none"; }}学生信息管理主页studentInfo.html
<html><head> <title>学生信息</title> <script type="text/javascript" src="util.js"></script> <script> //显示更新学生信息模态窗体 function showDialog() { var result = window.showModalDialog("dialog.html",null,"dialogWidth=400px;dialogHeight=400px;"); if(result&&result.length!=0&&result!="") { addRow(result); } } //添加一行学生信息 function addRow(result) { var doc = window.listFrame.document;//内嵌框架的document对象 var tb = doc.getElementById("stuTable");//学生信息表格 var tbody = doc.getElementById("mytbody"); //创建新的行 var tr = doc.createElement("<tr onClick='SelectRow(this)' ondblclick='update();' oncontextmenu='openShortCutMenu(this)' title='右键修改'>"); //创建行的第一个单元格中的多选框 var check = document.createElement("<input name='idArray' type='checkbox'>"); var td = document.createElement("td"); td.appendChild(check); tr.appendChild(td); //将模式窗体传过来的值添加到新行中 for(i=0;i<result.length;i++) { var td = document.createElement("td"); td.appendChild(document.createTextNode(result)); tr.appendChild(td); } tbody.appendChild(tr); } //删除学生信息 function delStudent() { var checks = window.listFrame.document.getElementsByName("idArray"); var count = multiCheck(checks); if(count==0) {alert("未选中任何选项！"); return;} if(window.confirm("确定要删除这"+count+"条信息吗？")) { while(count>0) { var tb = window.listFrame.document.getElementById("stuTable"); var checks = window.listFrame.document.getElementsByName("idArray"); for(i=0;i<checks.length;i++) { if(checks.checked) { tb.deleteRow(checks.parentElement.parentElement.rowIndex); count--; break; } } } } } //修改学生信息 function update() { var CurrRow = window.listFrame.CurrRow; if(CurrRow&&CurrRow.cells.length>0) { var values = new Array(); for(i=0;i<CurrRow.cells.length-1;i++) { values = CurrRow.cells.innerText; } values = CurrRow;//将修改的当前行传给模式窗体进行修改 var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;"); }else { alert("请选中要修改的行"); } } </script></head> <body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="95%"> <tr> <td width="100%" height="100%" valign="top"> <IFRAME width="100%" id="listFrame" height="100%" border=0 frameBorder=1 name="listFrame" src="list.html"></IFRAME> </td> </tr> <tr> <td width="100%" align="center" colspan="2"> <input class="btn_70" type="button" value="刷新" id="btRefresh" > &emsp;&emsp; <input class="btn_70" type="button" value="删除" id="btDel" > &emsp;&emsp; <input class="btn_70" type="button" value="添加" id="btAdd" > &emsp;&emsp; <input type="button" Class="btn_70" value="修改" name="btModify" > &emsp;&emsp; </td> </tr> </table></body></html>学生信息列表页面(list.html)，此页面内嵌在studentInfo.html中
<html><head> <title>学生信息列表</title> <script type="text/javascript" src="util.js"></script> <script> // 当前行对象变量 var CurrRow = null; // 选定表格行函数 function SelectRow(row) { // 如果有曾选定过的行, 则恢复此行为未选定状态 if(CurrRow) { CurrRow.style.backgroundColor=""; } // 设置新的选定行的状态 row.style.backgroundColor = '#D9F5FF'; // 前新的行赋给 当前行变量 CurrRow = row; } //更新学生信息 function update() { var values = new Array(); for(i=0;i<CurrRow.cells.length-1;i++) { values = CurrRow.cells.innerText; } values = CurrRow;//将修改的当前行传给模式窗体进行修改 var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;"); } </script></head> <body onmousedown="CloseShortCutMenu()"> <table border="1" width="100%" bordercolor="#666666" cellspacing="0" id="stuTable" style="border-collapse: collapse" cellpadding="2" align="center"> <caption>07级学生信息列表</caption> <tbody id="mytbody"> <tr class="th"> <td><input type="checkbox" >[全选/反选]</td> <td>学号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>学校</td> <td>手机</td> </tr> <trondblclick="update();" oncontextmenu="openShortCutMenu(this)" title="右键修改"> <td><input name="idArray" type="checkbox"></td> <td>430901</td> <td>hackiller</td> <td>男</td> <td>21</td> <td>中南林业科技大学涉外学院</td> <td>12345678901</td> </tr> </tbody> </table> <div id="ShortCutMenu" style="position: absolute; left: -200px; top: -200px; width: 120px; z-index: 999; display: none"> <table border="0" width="120" style="border-collapse: collapse; border: 2 outset #AEA67C" cellspacing="0" cellpadding="4" bgcolor="#EBF5FF"> <tr style="cursor: default"onmouseout="this.bgColor=''" onmousedown="update();"> <td width="90">修改</td> </tr> </table> </div></body></html>更新学生信息对话框页面(dialog.html)，用于添加和修改表格
<html><head> <title>更新学生信息</title> <script type="text/javascript" src="util.js"></script> <script> var arg = window.dialogArguments; function updateInfo() { var stuValues = getStuValues(); if(!arg) { window.returnValue = stuValues; }else { for(i=0;i<stuValues.length;i++) { arg.cells.innerText=stuValues; } } window.close(); } //取消更新 function cancle() { window.close(); } //初始化 function init() { if(arg) { setStuValues(arg); } } //获取学生信息 function getStuValues() { var tb = document.getElementById("stuInfoTb"); var stuValues = new Array(6); for(i=0;i<6;i++) { //获取表格中每一行第2个单元格中的元素的值，即学生信息 stuValues = tb.rows.cells.children.value; } var female = tb.rows.cells.children; if(female.checked) stuValues='女'; else stuValues='男'; return stuValues; } //设置学生信息初始值 function setStuValues(stuValues) { var tb = document.getElementById("stuInfoTb"); for(i=0;i<6;i++) { //获取表格中每一行第2个单元格中的元素的值，即学生信息 var elem = tb.rows.cells.children; elem.value = stuValues; } var female = tb.rows.cells.children; if(stuValues=='女') female.checked=true; } </script></head> <body> <table align="center" style="margin-top: 10%;" id="stuInfoTb"> <tr> <td>学号</td> <td><input type="text" id="stuID" name="stuID" onkeypress="toNext(stuName);"></td> </tr> <tr> <td>姓名</td> <td><input type="text" id="stuName" name="stuName" maxlength="20" onkeypress="toNext(stuAge);"></td> </tr> <tr> <td>性别</td> <td> <input type="radio" id="male" name="stuSex" value="男" checked="checked">男 &nbsp;&nbsp; <input type="radio" id="female" name="stuSex" value="女">女 </td> </tr> <tr> <td>年龄</td> <td><input type="text" id="stuAge" name="stuAge" maxlength="2" onkeypress="toNext(stuSchool);" onkeyup="this.value=this.value.replace(/\D/g,'');"> </td> </tr> <tr> <td>学校</td> <td><input type="text" id="stuSchool" name="stuSchool" maxlength="50" onkeypress="toNext(stuMobile);"></td> </tr> <tr> <td>手机</td> <td><input type="text" id="stuMobile" name="stuMobile" maxlength="50" onkeypress="if(event.keyCode==13) updateInfo();"></td> </tr> <tr align="center"><td colspan="2"> <input type="button" class="btn_70" value="确定" > &nbsp;&nbsp; <input type="button" class="btn_70" value="取消" > </td></tr> </table> <script>init();</script></body></html>二、在学习和做项目过程中写的JavaScript验证函数(正则表达式)
//身份证合法性function isIdentity(new_num){ var num = new_num; var len = num.length ; var re ; if (len == 15) { if (isNaN(num)) {alert("输入的不是数字！"); return false;} } if (len == 15) re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/); else if (len == 18) re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d|)$/); else { alert("输入的数字位数不对！"); return false;} var a = num.match(re); if (a != null) { if (len==15) { var D = new Date("19"+a+"/"+a+"/"+a); var B = D.getYear()==a&&(D.getMonth()+1)==a&&D.getDate()==a; } else { var D = new Date(a+"/"+a+"/"+a); var B = D.getFullYear()==a&&(D.getMonth()+1)==a&&D.getDate()==a; } if (!B) {alert("输入的身份证号 "+ a +" 里出生日期不对！"); return false;} }else { alert("输入的身份证号不对！"); return false; } return true;}//电子邮箱的合法性function checkemail(email){ var myReg = /^([-_A-Za-z0-9\.]+)@(+\.)+{2,3}$/; if(!myReg.test( email )) { alert("请输入合法的电子邮件地址"); return false; } return true;}//验证邮政编码function checkPostcode(postcode) { var reobj = new RegExp(/^\d+$/); if(!reobj.test(postcode)||!postcode.length!=6) { alert("请输入正确的邮政编码"); return false; } return true; } //价格验证function checkPrice(price){ var float = /^\d+(.){0,1}?\d{0,2}$/;//两位小数 var int = /^\d*$/;//正整数 if(!float.test(price)&&!int.test(price)) { alert("请输入正确的商品价格"); return false; } return true;}//验证上传图片类型function valiImgType(fileName){ var extension = fileName.substring(fileName.lastIndexOf(".")+1,fileName.length).toLowerCase(); if(extension!="jpg"&&extension!="gif") { alert("请选择jpg或gif格式的图片"); return false; } return true;}//验证是否为中文function iszhCN(name){ var Expression=/[^\u4E00-\u9FA5]/; var objExp=new RegExp(Expression); if(!/^[\u4e00-\u9fa5]+$/.test(name)) { alert("请输入汉字,验证未通过"); return false; } return true;}//验证IP地址function checkIP(sIPAddress){ var exp=/^(\d{1,2}|1\d\d|2\d|25)\.(\d{1,2}|1\d\d|2\d|25)\.(\d{1,2}|1\d\d|2\d|25)\.(\d{1,2}|1\d\d|2\d|25)$/; var reg = sIPAddress.match(exp); var ErrMsg="你输入的是一个非法的IP地址段！\nIP段为：:xxx.xxx.xxx.xxx（xxx为0-255)！" if(reg==null) { alert(ErrMsg); return false; } return true;}三、在学习和做项目过程中写的常用JavaScript函数
//四舍五入,保留valiNumber个小数；function round(number,valiNumber){ document.write(number.toFixed(valiNumber));}// 判断字符串长度，一个中文按两个字符算function strlen(str){var len;var i;len = 0;for (i=0;i<str.length;i++){ if (str.charCodeAt(i)>255) len+=2; else len++;}return len;} 四、用JavaScript限制html输入框为整数
<!-- 第一种 --><input onkeypress="return event.keyCode>=48&&event.keyCode<=57" onpaste="var s=clipboardData.getData('text'); if(!/\D/.test(s)) value=s.replace(/^0*/,'');return false;" onkeyup="if(/(^0+)/.test(value))value=value.replace(/^0*/, '')" /><!-- 第二种 --><input type="text" onkeyup="this.value=this.value.replace(/\D/g,'');">
页:
[1]