zoukankan      html  css  js  c++  java

  • 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,'');"> 
  • 相关阅读:
    QT POST/GET HTTP操作
    PHP生成json
    Windows 获取进程ID
    易语言 多个窗口
    易语言 内存修改框架
    易语言 MD5生成
    易语言 获取验证码
    易语言网页登录 POST
    cs1.6 8倍镜
    HTMLTestRunner.py（Python3）
  • 原文地址：https://www.cnblogs.com/chengfang/p/javascript.html
Copyright © 2011-2022 走看看