表2

来源：互联网发布：淘宝专享打折怎么设置编辑：程序博客网时间：2024/04/20 04:39
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style>        td {            text-align: center;        }    </style>    <script src="jquery.1.12.4.js "></script>    <script>        $(function() {            var arr = [                ["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆" ]                ,                ["黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明"]                ,                ["和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县" ]                ,                ["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川"]            ];            var flag1 = false;            var flag2 = false;            var flag3 = false;            var flag4 = false;            //获取元素            var $name = $("#name");            var $pwd = $("#pwd");            var $age = $("#age");            var $city = $("#city");            $name.blur(function() {                if($name.val() == "") {                    alert("请输入用户名");                    flag1 = false;                } else {                    flag1 = true;                }            });            $pwd.blur(function() {                var $pl = $pwd.val().length;                if($pl > 4 && $pl < 16) {                    flag2 = true;                } else {                    alert("长度在4-16位之间");                    flag2 = false;                }            });            $age.blur(function() {                if($age.val() < 1 || $age.val() > 300) {                    alert("请输入正确的年龄");                    flag3 = false;                } else {                    flag3 = true;                }            });            $city.change(function(){                $("#city2 option").remove();                var ind = $(this).val();                alert(ind);                for(c in arr[ind]){                    var $c2 = $("#city2");                    var cs = $("<option>"+arr[ind][c]+"</option>");                    $c2.append(cs);                }            });            //提交按钮点击事件            $("#tj").click(function() {                if(flag1 && flag2 && flag3){                    var $nameV = $("#name").val();                    var $pwdV = $("#pwd").val();                    var $ageV = $("#age").val();                    var $sexV = $("input[name='sex']:checked").val();                    var $cityV = $("#city option:selected").html();                    var $city2V = $("#city2 option:selected").html();                    var $data = $("#data");                    var $a = $("<tr><td><input type='checkbox'></td><td>"+$nameV+"</td><td>"+$pwdV+"</td><td>"+$ageV+"</td><td>"+$sexV+"</td><td>"+$cityV+"-"+$city2V+"</td></tr>");                    $data.append($a);                }else{                    alert("请按要求输入信息");                }            });        });    </script>    <!--全选，全不选-->    <script>        //页面加载完成        $(function(){            //选中全选            $("#all").click(function(){                //判断状态                var fl = $(this).prop("checked");                if(fl){                    //全选                    var $ch = $(":checkbox");                    $ch.each(function(index, element) {                        $ch[index].checked=true;                    });                }else{                    //全不选                    var $ch = $(":checkbox");                    $ch.each(function(index, element) {                        $ch[index].checked=false;                    });                }            });            //批量删除，点击删除，删除选中的元素            $("#del").click(function(){                //data表格下有是checked且没有id属性的都删除                $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素            })        });    </script></head><body><center>    <h2>用户注册</h2>    <table border="1px" cellpadding="10px" cellspacing="0px">        <tr>            <td>用户名</td>            <td><input type="text" placeholder="用户名不能为空" id="name" /></td>        </tr>        </tr>        <td>密　码</td>        <td><input type="password" placeholder="长度在4-16位之间" id="pwd" /></td>        </tr>        </tr>        <td>年　龄</td>        <td><input type="number" placeholder="年龄必须是数字" id="age" /></td>        </tr>        </tr>        <td>性　别</td>        <td><input type="radio" value="男" name="sex" checked="checked"/>男            <input type="radio" value="女" name="sex" />女</td>        </tr>        <tr>            <td>住　址</td>            <td>省                <select id="city">                    <option value=0>北京</option>                    <option value=1>上海</option>                    <option value=2>天津</option>                    <option value=3>重庆</option>                </select>                市                <select id="city2">                    <option>东城区</option>                    </section>            </td>        </tr>        <tr>            <td colspan="2"><button id="tj">提交</button></td>        </tr>    </table>    <button id="del">批量删除</button>    <table border="1px" cellpadding="10px" cellspacing="0px" id="data">        <tr>            <td><input type="checkbox" id="all"></td>            <td>用户名</td>            <td>密　码</td>            <td>年　龄</td>            <td>性　别</td>            <td>住　址</td>        </tr>    </table></center></body></html>
阅读全文
0 0