javaScript 笔记 3

"javaScript 笔记 3 "

    "表格的排序效果"

    1.表格中的数据安装要求进行排序

        var b =true;
        function sorttab(){
            var tabNode = document.getElementsByTagName("table")[0];
            var tbdNode = tabNode.childNodes[0];
            var trs = tabNode.rows;
            
            var arr = new Array();
            for(var i=1; i<trs.length; i++){
                arr[i-1] = trs[i];
            }
            sortt(arr);
            
            if(b){
                    for(var j = 0;j<arr.length; j++){
                        
                        //alert(arr[j].cells[1].innerText);
                        tbdNode.appendChild(arr[j]);
                    }
                    b = false;
            }else{
                for(var j = arr.length-1;j>=0; j--){
                        
                        //alert(arr[j].cells[1].innerText);
                        tbdNode.appendChild(arr[j]);
                    }
                    b= true;
            }
        }
        function sortt(arr){
            for(var i=0; i<arr.length; i++){
                for(var j=i+1; j<arr.length; j++){
                    if(parseInt(arr[i].cells[1].innerText)>parseInt(arr[j].cells[1].innerText))
                    {
                        var temp = arr[i];
                        arr[i] = arr[j];
                        arr[j] = temp;            
                    }
                }
            }
        }
----------------------------------------------------------------------------------------
"获取鼠标坐标"

    1.获取鼠标坐标：event.x , event.y

    2.指定区域随鼠标移动，就是改变了指定区域的left ，top的属性

    3.用到的事件：body 对象的 onmousemove 事件。
        
        style="position:absolute; left:0; top:0"
            //
        
        window.οnlοad=function(){
        document.body.onmousemove = function(){
                var adNode = document.getElementById("ad");
                adNode.style.left = event.x-50;
                adNode.style.top = event.y-50;
            }        
        }
        function closed(){
        
            var adNode = document.getElementById("ad");
            adNode.style.display = "none";
        }

        <div id="ad" style="position:absolute; left:0; top:0" οnclick="closed()">
            <a href="javascript:void(0)" >
            <img src="2.bmp" height="100px" width="120px" /></a>
        </div>
---------------------------------------------------------------------------------------
"级联菜单"
        
        1.点击菜单触发响应事件，//跟仿照css效果那个差不多

        2.点了相应菜单就使后面列表做出改变。

        function selguojia(){
            var arr = [["--选择城市--"],
                        ["北京","上海","广州","深圳"],
                        ["华盛顿","纽约","旧金山","洛杉矶"],
                        ["东京","大阪","北海道","名古屋"]];
            var index = document.getElementById("selid").selectedIndex;
            var subNode = document.getElementById("subselid");
            var citys = arr[index];
            /*for(var i= 0; i<=subNode.options.length; ){
                subNode.removeChild(subNode.options[i]);
            }*/
            subNode.options.length = 0;
            for(var i=0; i<citys.length; i++){
                var optNode = document.createElement("option");
                optNode.innerText = citys[i];
                subNode.appendChild(optNode);
                
            }
        }
------------------------------------------------------------------------------------------
"添加附件和表格"
    
        1.练习动态生成和删除表格

        function add(){
            var tabNode = document.getElementsByTagName("table")[0];
            var trNode = tabNode.insertRow();
            var tdNode_file = trNode.insertCell();
            var tdNode_del = trNode.insertCell();
            
            tdNode_file.innerHTML = "<input type='file' />";
            tdNode_del.innerHTML = "<a href='javascript:void(0)' οnclick='delNode(this)'>删除附件</a>";
        }
        function delNode(node){
            var trNode = node.parentNode.parentNode;
            var tbdNode = trNode.parentNode;
            tbdNode.removeChild(trNode);
        }
----------------------------------------------------------------------------------------
"表格校验"

    1.本例涉及众多，正则表达式，提交表单

    2.表单校验最后的提交按钮，不做效果的话，无论上面信息是否正确都可以提交出去。

    3.该提交按钮在表单里有特殊应用，在 form 标签中有对应事件，不用对应按钮。
        
            <form οnsubmit="对应方法()"></form>
            <script type="text/javascript">
                function 对应方法(){
                    event.returnValue = false;
                }    //提交分为按下和数据出去两步，这里是 false ，可以按下，但是
                    //返回为假，数据出不去。
            </script>

            <form οnsubmit="return 第二种方法()"></form>
            function 第二种方法(){//这里将函数结果返给了事件。为假，还是出不去。
                return false;
            }        //该方法直接返回 false；

//-----------------------------------------

        <style type="text/css">
            #userno,#useryes{display:none}
            #pswyes,#pswno{display:none}
        </style>
        <script type="text/javascript">
            function checkuser(node){
                var name = node.value;
                var spanyes = document.getElementById("useryes");
                var spanno = document.getElementById("userno");
                var namereg = new RegExp("^[a-z]{5}$");
                if(name.match(namereg)){
                    spanyes.style.display = "inline";
                    spanyes.style.color = "green";
                    spanno.style.display = "none";
                }else{        
                    spanno.style.display = "inline";
                    spanno.style.color = "red";
                    spanyes.style.display = "none";
                }
            }
            function checkpsw(node){
                var psw = node.value;
                //var pswreg = new RegExp("^[0-9]{5}$");
                var pswreg = /^\d{5}$/;
                var pswspan = document.getElementById("pswspan");
                if(psw.match(pswreg))
                    pswspan.innerHTML = "密码正确".fontcolor("green");
                else
                    pswspan.innerHTML = "密码错误".fontcolor("red");                    
            }
            function checkmail(node){
                var mail = node.value;
                var mailreg = /^\w+@\w+(\.\w+)+$/;
                var mailNode = document.getElementById("mailspan");
                if(mailreg.test(mail))
                    mailNode.innerHTML = "邮箱正确".fontcolor("green");
                else
                    mailNode.innerHTML = "邮箱错误".fontcolor("red");
            }
            function checkform(){
                event.returnValue = false;
            }
        </script>
        </head>

        <body>
        <form action="127.0.0.1" οnsubmit="checkform()">
        用户名称：<input type="text" name="user" οnblur="checkuser(this)"/>
        <span id="useryes">用户名正确</span><span id="userno">用户名错误</span>
        <br />
        输入密码：<input type="text" name="psw" οnblur="checkpsw(this)"/>
        <span id="pswspan"></span>
        <br />
        确认密码：<input type="text" name="repsw" /><br />
        邮件地址：<input type="text" name="mail" οnblur="checkmail(this)"/>
        <span id="mailspan"></span>
        <br />
        <input type="submit" value="提交数据" />
        </form>
---------------------------------------------------------------------------------------
"表单校验完整"

        <style type="text/css">
            table{width:70%}
            table,table td,table th{border:#FF6666 1px solid;
            border-collapse:collapse;
            padding:10px;}
            table th{background:#996600}
            table td{background:#99FF66;}
            #repswspan{margin-left:120px;}
            .errinfo{color:red; display:none}
            .focus{border:#0000FF 2px solid;}
            .norm{border:#0033FF 1px solid;}
            .error{border:red 2px solid;}
        </style>
        <script type="text/javascript">
            function inputcolor(input){
                input.className = "none";
                input.onfocus = function(){
                    this.className = "focus";
                }
            }
            window.onload = function(){
                with(document.forms[0]){
                    inputcolor(username);
                    inputcolor(psw);
                    inputcolor(repsw);
                    inputcolor(mail);
                }
            }
            function check(inputNode,regex,divId){
                var b = false;
                var divNode = document.getElementById(divId);
                if(regex.test(inputNode.value)){
                    inputNode.className = "norm";
                    divNode.style.display = "none";
                    b = true;
                }else{
                    inputNode.className = "error";
                    divNode.style.display = "block";
                }
                    return b;
            }
            function checkuser(userNode){
                var namereg = /^\w{3,5}$/;
                return check(userNode,namereg,"userdiv");
            }
            function checkpsw(pswNode){
                var regex = /^[a-z0-9]{3,6}$/i;
                return check(pswNode,regex,"pswdiv");
            }
            function checkrepsw(repswNode){
                var b = false;
                var revalue = repswNode.value;
                var pswvalue = document.getElementsByName("psw")[0].value;
                var divNode = document.getElementById("repswdiv");
                if(revalue==pswvalue){
                    repswNode.className = "norm";
                    divNode.style.display = "none";
                    b = true;
                }else{
                    repswNode.className = "error";
                    divNode.style.display = "block";
                }
                return b;
            }
            function checkmail(mailNode){
                var regex = /^\w+@\w+(\.\w+)+$/;
                return check(mailNode,regex,"maildiv");
            }
            /*function checkuser(node){
                var name = node.value;
                var namereg = /^\w{3,5}$/;
                var divNode = document.getElementById("userdiv");        
                if(namereg.test(name)){
                    node.className = "norm";
                    divNode.style.display = "none";            
                }else{
                    node.className = "error";
                    divNode.style.display = "block";
                }
                    
            }*/
            function checkform(formNode){
                //alert(formNode.username.value);
                with(formNode){
                    if(checkuser(username) && checkpsw(psw) && checkrepsw(repsw) && checkmail(mail))
                        event.returnValue = true;
                    else
                        event.returnValue = false;    
                }    
            }
        </script>
        </head>

        <body>
        <form οnsubmit="checkform(this)" method="get" action="127.0.0.1">
            <table>
                <tr>
                    <th>用户注册</th>
                </tr>
                <tr>
                    <td>
                        <div>用户名</div>
                        <div><input type="text" name="username" οnblur="checkuser(this)"/></div>
                        <div class="errinfo" id="userdiv">用户名错误，请按要求注册：</div>
                        <div>用户名要求：由字母数字下划线组成，5位或以下</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>密码  <span id="repswspan">确认密码</span>
                        </div>
                        <div>
                            <input type="password" name="psw" οnblur="checkpsw(this)"/>
                            <input type="password" name="repsw" οnblur="checkrepsw(this)"/>
                        </div>
                        <div class="errinfo" id="pswdiv">密码错误，请按要求输密码</div>
                        <div class="errinfo" id="repswdiv">两次密码不一样</div>
                        <div>密码由字母数字下划线组成，5位或以下</div>                
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>邮箱</div>
                        <div><input type="text" name="mail" οnblur="checkmail(this)"/></div>
                        <div class="errinfo" id="maildiv">邮箱错误，请输入正确邮箱</div>
                    </td>
                </tr>
                <tr>
                    <th>
                        <input type="submit" value="提交数据" />
                    </th>
                </tr>
            </table>
        </form>