论坛首页 → Web前端技术论坛 →

J2EE复习(三)JavaScript(下)--实战应用

浏览 2656 次
锁定老帖子 主题：J2EE复习(三)JavaScript(下)--实战应用
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • hackiller
  • 等级: 初级会员
  • 性别:
  • 文章: 3
  • 积分: 90
  • 来自: 湖南
   发表时间：2009-04-11   最后修改：2010-01-01

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

//全选反选
function checkAll(boxName) {
    var checkBox = document.getElementsByName(boxName);
    for (i = 0; i < checkBox.length; i++) {
        var checked = checkBox[i].checked;
        if (checked) {
            checkBox[i].checked = false;
        } else {
            checkBox[i].checked = true;
        }
    }
}
//多选验证
function multiCheck(idArray)
{
    //var idArray = document.getElementsByName(boxName);
    var count = 0;
    for(i=0;i<idArray.length;i++)
    {
        if(idArray[i].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[0]!="")
            {
                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[i]));
                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[i].checked)
                        {   
                            tb.deleteRow(checks[i].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[i] = CurrRow.cells[i+1].innerText;
                }
                values[values.length] = 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"
                        onclick="listFrame.location.reload();">
                    &emsp;&emsp;
                    <input class="btn_70" type="button" value="删  除" id="btDel"
                        onclick="delStudent();">
                    &emsp;&emsp;
                    <input class="btn_70" type="button" value="添  加" id="btAdd"
                        onclick="showDialog();">
                    &emsp;&emsp;
                    <input type="button" Class="btn_70" value="修  改" name="btModify"
                        onclick="update();">
                    &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[i] = CurrRow.cells[i+1].innerText;
             }
             values[values.length] = 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" onclick="checkAll('idArray');">[全选/反选]</td>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>学校</td>
            <td>手机</td>
        </tr>
        <tr onClick="SelectRow(this)" ondblclick="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" onmouseover="this.bgColor='#ADCFFF'" 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[arg.length-1].cells[i+1].innerText=stuValues[i];
                }
            }
            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[i] = tb.rows[i].cells[1].children[0].value;
          }

          var female = tb.rows[2].cells[1].children[1];
          if(female.checked) stuValues[2]='女';
          else stuValues[2]='男';
          return stuValues;
        }
        //设置学生信息初始值
        function setStuValues(stuValues)
        {
          var tb = document.getElementById("stuInfoTb");
          for(i=0;i<6;i++)
          {
              //获取表格中每一行第2个单元格中的元素的值，即学生信息
              var elem = tb.rows[i].cells[1].children[0];
              elem.value = stuValues[i];
          }
          var female = tb.rows[2].cells[1].children[1];
          if(stuValues[2]=='女') 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="确定" onclick="updateInfo();">
            &nbsp;&nbsp;
            <input type="button" class="btn_70" value="取消" onclick="cancle();">
        </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|[X])$/);
    else {    alert("输入的数字位数不对！"); return false;}
    var a = num.match(re);
    if (a != null)
    {
        if (len==15)
        {
        var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
        var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
        }
        else
        {
        var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
        var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
        }
        if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;}
    }else
    {
        alert("输入的身份证号不对！");
        return false;
    }
    return true;
}
//电子邮箱的合法性
function checkemail(email)
{     
    var myReg = /^([-_A-Za-z0-9\.]+)@([_A-Za-z0-9]+\.)+[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 = /^[1-9]\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[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])$/;
    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,'');">

 
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics