javascript

动态增删改Table表格
一、用js做的表格动态增删查改
工具JavaScript：util.js

Js代码 复制代码 收藏代码
  1. //全选反选 
  2. function checkAll(boxName) { 
  3.     var checkBox = document.getElementsByName(boxName); 
  4.     for (i = 0; i < checkBox.length; i++) { 
  5.         var checked = checkBox[i].checked; 
  6.         if (checked) { 
  7.             checkBox[i].checked = false; 
  8.         } else { 
  9.             checkBox[i].checked = true; 
  10.         } 
  11.     } 
  12. } 
  13. //多选验证 
  14. function multiCheck(idArray) 
  15. { 
  16.     //var idArray = document.getElementsByName(boxName); 
  17.     var count = 0; 
  18.     for(i=0;i<idArray.length;i++) 
  19.     { 
  20.         if(idArray[i].checked) 
  21.         { 
  22.             count++; 
  23.         } 
  24.     } 
  25.     return count; 
  26. } 
  27.  
  28.  
  29. //回车切换焦点 
  30. function toNext(next) 
  31. { 
  32.       if(event.keyCode==13) 
  33.       { 
  34.           next.focus(); 
  35.       } 
  36. } 
  37.  
  38. //打开右键菜单 
  39. function openShortCutMenu(oRow) 
  40. { 
  41.   // 选中当前行 
  42.   SelectRow(oRow); 
  43.   aOpenPopMenu("ShortCutMenu"); 
  44.   event.cancelBubble = true; 
  45.   event.returnValue = false; 
  46. } 
  47. //关闭右键菜单 
  48. function CloseShortCutMenu(){ 
  49.        aClosePopMenu("ShortCutMenu"); 
  50. } 
  51. //显示右键菜单 
  52. function aOpenPopMenu(MenuId){ 
  53.     if (document.all(MenuId)){ 
  54.         document.all(MenuId).style.left = event.clientX + document.body.scrollLeft; 
  55.           document.all(MenuId).style.top = event.clientY + document.body.scrollTop; 
  56.           document.all(MenuId).style.display = ""; 
  57.     } 
  58. } 
  59. //隐藏右键菜单 
  60. function aClosePopMenu(MenuId){ 
  61.     if (document.all(MenuId)){ 
  62.        document.all(MenuId).style.display = "none"; 
  63.     } 
  64. } 

学生信息管理主页studentInfo.html

Html代码 复制代码 收藏代码
  1. <html> 
  2.   <head> 
  3.     <title>学生信息</title> 
  4.     <script type="text/javascript" src="util.js"></script> 
  5.     <script> 
  6.        //显示更新学生信息模态窗体 
  7.         function showDialog() 
  8.         { 
  9.             var result = window.showModalDialog("dialog.html",null,"dialogWidth=400px;dialogHeight=400px;");             
  10.             if(result&&result.length!=0&&result[0]!="") 
  11.             { 
  12.                 addRow(result); 
  13.             } 
  14.         } 
  15.         //添加一行学生信息 
  16.         function addRow(result) 
  17.         { 
  18.             var doc = window.listFrame.document;//内嵌框架的document对象 
  19.             var tb = doc.getElementById("stuTable");//学生信息表格 
  20.             var tbody = doc.getElementById("mytbody"); 
  21.             //创建新的行 
  22.             var tr = doc.createElement("<tr onClick='SelectRow(this)' ondblclick='update();' oncontextmenu='openShortCutMenu(this)' title='右键修改'>"); 
  23.             //创建行的第一个单元格中的多选框 
  24.             var check = document.createElement("<input name='idArray' type='checkbox'>"); 
  25.             var td = document.createElement("td"); 
  26.             td.appendChild(check); 
  27.             tr.appendChild(td); 
  28.             //将模式窗体传过来的值添加到新行中 
  29.             for(i=0;i<result.length;i++) 
  30.             { 
  31.                 var td = document.createElement("td"); 
  32.                 td.appendChild(document.createTextNode(result[i])); 
  33.                 tr.appendChild(td); 
  34.             } 
  35.             tbody.appendChild(tr); 
  36.         } 
  37.         //删除学生信息 
  38.         function delStudent() 
  39.         { 
  40.          
  41.             var checks = window.listFrame.document.getElementsByName("idArray"); 
  42.             var count = multiCheck(checks); 
  43.             if(count==0) {alert("未选中任何选项！"); return;} 
  44.             if(window.confirm("确定要删除这"+count+"条信息吗？")) 
  45.             { 
  46.                 while(count>0) 
  47.                 { 
  48.                     var tb = window.listFrame.document.getElementById("stuTable"); 
  49.                     var checks = window.listFrame.document.getElementsByName("idArray"); 
  50.                     for(i=0;i<checks.length;i++) 
  51.                     { 
  52.                         if(checks[i].checked) 
  53.                         {    
  54.                             tb.deleteRow(checks[i].parentElement.parentElement.rowIndex); 
  55.                             count--; 
  56.                             break; 
  57.                         } 
  58.                     } 
  59.                 } 
  60.             } 
  61.                  
  62.         } 
  63.         //修改学生信息 
  64.         function update() 
  65.         { 
  66.              var CurrRow = window.listFrame.CurrRow; 
  67.              if(CurrRow&&CurrRow.cells.length>0) 
  68.              { 
  69.                   var values = new Array(); 
  70.                 for(i=0;i<CurrRow.cells.length-1;i++) 
  71.                 { 
  72.                     values[i] = CurrRow.cells[i+1].innerText; 
  73.                 } 
  74.                 values[values.length] = CurrRow;//将修改的当前行传给模式窗体进行修改 
  75.                 var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;"); 
  76.              }else 
  77.              { 
  78.                  alert("请选中要修改的行"); 
  79.              } 
  80.         } 
  81.     </script> 
  82.   </head> 
  83.    
  84.   <body bgcolor="#FFFFFF" text="#000000" onselectstart="return false;"> 
  85.       <table border="0" cellpadding="0" cellspacing="0" width="100%" 
  86.             height="95%"> 
  87.             <tr> 
  88.                 <td width="100%" height="100%" valign="top"> 
  89.                     <IFRAME width="100%" id="listFrame" height="100%" border=0 
  90.                         frameBorder=1 name="listFrame" src="list.html"></IFRAME> 
  91.                 </td> 
  92.             </tr> 
  93.             <tr> 
  94.                 <td width="100%" align="center" colspan="2"> 
  95.                     <input class="btn_70" type="button" value="刷  新" id="btRefresh" 
  96.                         onclick="listFrame.location.reload();"> 
  97.                     &emsp;&emsp; 
  98.                     <input class="btn_70" type="button" value="删  除" id="btDel" 
  99.                         onclick="delStudent();"> 
  100.                     &emsp;&emsp; 
  101.                     <input class="btn_70" type="button" value="添  加" id="btAdd" 
  102.                         onclick="showDialog();"> 
  103.                     &emsp;&emsp; 
  104.                     <input type="button" Class="btn_70" value="修  改" name="btModify" 
  105.                         onclick="update();"> 
  106.                     &emsp;&emsp; 
  107.                 </td> 
  108.             </tr> 
  109.         </table> 
  110.   </body> 
  111. </html> 

学生信息列表页面(list.html)，此页面内嵌在studentInfo.html中

Html代码 复制代码 收藏代码
  1. <html> 
  2.   <head> 
  3.     <title>学生信息列表</title> 
  4.     <script type="text/javascript" src="util.js"></script> 
  5.     <script> 
  6.         // 当前行对象变量 
  7.         var CurrRow = null; 
  8.         // 选定表格行函数 
  9.         function SelectRow(row) 
  10.         { 
  11.             // 如果有曾选定过的行, 则恢复此行为未选定状态 
  12.             if(CurrRow) 
  13.             { 
  14.                CurrRow.style.backgroundColor=""; 
  15.             } 
  16.             // 设置新的选定行的状态 
  17.             row.style.backgroundColor = '#D9F5FF'; 
  18.            // 前新的行赋给 当前行变量 
  19.             CurrRow = row; 
  20.         } 
  21.         //更新学生信息 
  22.         function update() 
  23.         { 
  24.              var values = new Array(); 
  25.              for(i=0;i<CurrRow.cells.length-1;i++) 
  26.              { 
  27.                 values[i] = CurrRow.cells[i+1].innerText; 
  28.              } 
  29.              values[values.length] = CurrRow;//将修改的当前行传给模式窗体进行修改 
  30.              var result = window.showModalDialog("dialog.html",values,"dialogWidth=400px;dialogHeight=400px;"); 
  31.         } 
  32.     </script> 
  33.   </head> 
  34.    
  35.   <body onmousedown="CloseShortCutMenu()"> 
  36.     <table border="1" width="100%" bordercolor="#666666" cellspacing="0" id="stuTable" 
  37.                  style="border-collapse: collapse" cellpadding="2" align="center"> 
  38.         <caption>07级学生信息列表</caption>  
  39.         <tbody id="mytbody"> 
  40.         <tr class="th"> 
  41.             <td><input type="checkbox" onclick="checkAll('idArray');">[全选/反选]</td> 
  42.             <td>学号</td> 
  43.             <td>姓名</td> 
  44.             <td>性别</td> 
  45.             <td>年龄</td> 
  46.             <td>学校</td> 
  47.             <td>手机</td> 
  48.         </tr> 
  49.         <tr onClick="SelectRow(this)" ondblclick="update();" oncontextmenu="openShortCutMenu(this)" title="右键修改"> 
  50.             <td><input name="idArray" type="checkbox"></td> 
  51.             <td>430901</td> 
  52.             <td>hackiller</td> 
  53.             <td>男</td> 
  54.             <td>21</td> 
  55.             <td>中南林业科技大学涉外学院</td> 
  56.             <td>12345678901</td> 
  57.         </tr> 
  58.         </tbody> 
  59.     </table> 
  60.     <div id="ShortCutMenu" style="position: absolute; left: -200px; top: -200px; 120px; z-index: 999; display: none"> 
  61.       <table border="0" width="120" style="border-collapse: collapse; border: 2 outset #AEA67C" cellspacing="0" cellpadding="4" bgcolor="#EBF5FF"> 
  62.         <tr style="cursor: default" onmouseover="this.bgColor='#ADCFFF'" onmouseout="this.bgColor=''" onmousedown="update();"> 
  63.           <td width="90">修改</td> 
  64.         </tr> 
  65.       </table> 
  66.      </div> 
  67.   </body> 
  68. </html> 

更新学生信息对话框页面(dialog.html)，用于添加和修改表格

Html代码 复制代码 收藏代码
  1. <html> 
  2.   <head> 
  3.     <title>更新学生信息</title> 
  4.     <script type="text/javascript" src="util.js"></script> 
  5.     <script> 
  6.         var arg = window.dialogArguments; 
  7.         function updateInfo() 
  8.         {   
  9.             var stuValues = getStuValues(); 
  10.             if(!arg)  
  11.             {             
  12.                 window.returnValue = stuValues; 
  13.             }else 
  14.             { 
  15.                 for(i=0;i<stuValues.length;i++) 
  16.                 { 
  17.                     arg[arg.length-1].cells[i+1].innerText=stuValues[i]; 
  18.                 } 
  19.             } 
  20.             window.close(); 
  21.         } 
  22.         //取消更新 
  23.         function cancle() 
  24.         { 
  25.             window.close(); 
  26.         } 
  27.         //初始化 
  28.         function init() 
  29.         { 
  30.             if(arg)  
  31.             { 
  32.                 setStuValues(arg); 
  33.             } 
  34.         } 
  35.         //获取学生信息 
  36.         function getStuValues() 
  37.         { 
  38.           var tb = document.getElementById("stuInfoTb"); 
  39.           var stuValues = new Array(6);           
  40.           for(i=0;i<6;i++) 
  41.           { 
  42.               //获取表格中每一行第2个单元格中的元素的值，即学生信息 
  43.               stuValues[i] = tb.rows[i].cells[1].children[0].value; 
  44.           } 
  45.  
  46.           var female = tb.rows[2].cells[1].children[1]; 
  47.           if(female.checked) stuValues[2]='女'; 
  48.           else stuValues[2]='男'; 
  49.           return stuValues; 
  50.         } 
  51.         //设置学生信息初始值 
  52.         function setStuValues(stuValues) 
  53.         { 
  54.           var tb = document.getElementById("stuInfoTb"); 
  55.           for(i=0;i<6;i++) 
  56.           { 
  57.               //获取表格中每一行第2个单元格中的元素的值，即学生信息 
  58.               var elem = tb.rows[i].cells[1].children[0]; 
  59.               elem.value = stuValues[i]; 
  60.           } 
  61.           var female = tb.rows[2].cells[1].children[1]; 
  62.           if(stuValues[2]=='女') female.checked=true; 
  63.         } 
  64.     </script> 
  65.   </head> 
  66.    
  67.   <body> 
  68.     <table align="center" style="margin-top: 10%;" id="stuInfoTb"> 
  69.         <tr> 
  70.             <td>学号</td> 
  71.             <td><input type="text" id="stuID" name="stuID" onkeypress="toNext(stuName);"></td> 
  72.         </tr> 
  73.         <tr> 
  74.             <td>姓名</td> 
  75.             <td><input type="text" id="stuName" name="stuName" maxlength="20" onkeypress="toNext(stuAge);"></td> 
  76.         </tr> 
  77.         <tr> 
  78.             <td>性别</td> 
  79.             <td> 
  80.                 <input type="radio" id="male" name="stuSex" value="男" checked="checked">男 
  81.                 &nbsp;&nbsp; 
  82.                 <input type="radio" id="female" name="stuSex" value="女">女 
  83.             </td> 
  84.         </tr> 
  85.         <tr> 
  86.             <td>年龄</td> 
  87.             <td><input type="text" id="stuAge" name="stuAge" maxlength="2"  
  88.                  onkeypress="toNext(stuSchool);" onkeyup="this.value=this.value.replace(/\D/g,'');"> 
  89.             </td> 
  90.         </tr> 
  91.         <tr> 
  92.             <td>学校</td> 
  93.             <td><input type="text" id="stuSchool" name="stuSchool" maxlength="50" onkeypress="toNext(stuMobile);"></td> 
  94.         </tr> 
  95.         <tr> 
  96.             <td>手机</td> 
  97.             <td><input type="text" id="stuMobile" name="stuMobile" maxlength="50" onkeypress="if(event.keyCode==13) updateInfo();"></td> 
  98.         </tr> 
  99.         <tr align="center"><td colspan="2"> 
  100.             <input type="button" class="btn_70" value="确定" onclick="updateInfo();"> 
  101.             &nbsp;&nbsp; 
  102.             <input type="button" class="btn_70" value="取消" onclick="cancle();"> 
  103.         </td></tr> 
  104.     </table> 
  105.     <script>init();</script> 
  106.   </body> 
  107. </html> 

二、在学习和做项目过程中写的JavaScript验证函数(正则表达式)

Js代码 复制代码 收藏代码
  1. //身份证合法性 
  2. function isIdentity(new_num) 
  3. { 
  4.     var num = new_num; 
  5.     var len = num.length ; 
  6.     var re ; 
  7.     if (len == 15) 
  8.     { 
  9.         if (isNaN(num)) {alert("输入的不是数字！"); return false;} 
  10.     } 
  11.     if (len == 15) 
  12.         re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/); 
  13.     else if (len == 18) 
  14.         re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d|[X])$/); 
  15.     else {    alert("输入的数字位数不对！"); return false;} 
  16.     var a = num.match(re); 
  17.     if (a != null) 
  18.     { 
  19.         if (len==15) 
  20.         { 
  21.         var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]); 
  22.         var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; 
  23.         } 
  24.         else 
  25.         { 
  26.         var D = new Date(a[3]+"/"+a[4]+"/"+a[5]); 
  27.         var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; 
  28.         } 
  29.         if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;} 
  30.     }else 
  31.     { 
  32.         alert("输入的身份证号不对！"); 
  33.         return false; 
  34.     } 
  35.     return true; 
  36. } 
  37. //电子邮箱的合法性 
  38. function checkemail(email) 
  39. {      
  40.     var myReg = /^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/; 
  41.     if(!myReg.test( email )) 
  42.     { 
  43.         alert("请输入合法的电子邮件地址"); 
  44.         return false; 
  45.     }  
  46.     return true; 
  47. } 
  48. //验证邮政编码 
  49. function checkPostcode(postcode)    
  50. {    
  51.     var reobj = new RegExp(/^\d+$/); 
  52.     if(!reobj.test(postcode)||!postcode.length!=6) 
  53.     {   
  54.         alert("请输入正确的邮政编码"); 
  55.         return false;   
  56.     } 
  57.     return true;    
  58. }  
  59. //价格验证 
  60. function checkPrice(price) 
  61. { 
  62.     var float = /^\d+(.){0,1}?\d{0,2}$/;//两位小数 
  63.     var int = /^[1-9]\d*$/;//正整数 
  64.     if(!float.test(price)&&!int.test(price)) 
  65.     { 
  66.         alert("请输入正确的商品价格"); 
  67.         return false; 
  68.     } 
  69.     return true; 
  70. } 
  71. //验证上传图片类型 
  72. function valiImgType(fileName) 
  73. { 
  74.     var extension = fileName.substring(fileName.lastIndexOf(".")+1,fileName.length).toLowerCase(); 
  75.     if(extension!="jpg"&&extension!="gif") 
  76.     { 
  77.         alert("请选择jpg或gif格式的图片"); 
  78.         return false; 
  79.     } 
  80.     return true; 
  81. } 
  82. //验证是否为中文 
  83. function iszhCN(name) 
  84. { 
  85.     var Expression=/[^\u4E00-\u9FA5]/;  
  86.     var objExp=new RegExp(Expression); 
  87.  
  88.     if(!/^[\u4e00-\u9fa5]+$/.test(name))  
  89.     { 
  90.         alert("请输入汉字,验证未通过"); 
  91.         return false; 
  92.     } 
  93.     return true; 
  94. } 
  95. //验证IP地址 
  96. function checkIP(sIPAddress) 
  97. { 
  98.     var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; 
  99.     var reg = sIPAddress.match(exp); 
  100.     var ErrMsg="你输入的是一个非法的IP地址段！\nIP段为：:xxx.xxx.xxx.xxx（xxx为0-255)！"        
  101.     if(reg==null) 
  102.     { 
  103.         alert(ErrMsg); 
  104.         return false; 
  105.     } 
  106.     return true; 
  107. } 

三、在学习和做项目过程中写的常用JavaScript函数

Js代码 复制代码 收藏代码
  1. //四舍五入,保留valiNumber个小数； 
  2. function round(number,valiNumber) 
  3. { 
  4.     document.write(number.toFixed(valiNumber)); 
  5. } 
  6.  
  7. // 判断字符串长度，一个中文按两个字符算 
  8. function strlen(str) 
  9. { 
  10.   var len; 
  11.   var i; 
  12.   len = 0; 
  13.   for (i=0;i<str.length;i++) 
  14.   { 
  15.     if (str.charCodeAt(i)>255) len+=2; else len++; 
  16.   } 
  17.   return len; 
  18. } 

四、用JavaScript限制html输入框为整数

Html代码 复制代码 收藏代码
  1. <!-- 第一种 --> 
  2. <input onkeypress="return event.keyCode>=48&&event.keyCode<=57" 
  3.        onpaste="var s=clipboardData.getData('text'); if(!/\D/.test(s)) value=s.replace(/^0*/,'');return false;" 
  4.        onkeyup="if(/(^0+)/.test(value))value=value.replace(/^0*/, '')" /> 
  5. <!-- 第二种 --> 
  6. <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'');"> 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chengfang/p/javascript.html