angularJS省市联动

最新推荐文章于 2018-09-05 21:58:58 发布

gh323093

最新推荐文章于 2018-09-05 21:58:58 发布

阅读量450

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78596597

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #sub{
            background: chartreuse;
            width: 80px;
            height: 30px;
            border-radius: 15%;
        }
        #quan_fan{
            background: yellow;
            width: 80px;
            height: 30px;
            border-radius: 15%;
        }
        #p_shan{
            background: red;
            width: 80px;
            height: 30px;
            border-radius: 15%;
        }
        table{
            width: 600px;
            height: 100px;
            border-collapse: collapse;
        }
        th{
            padding: 8px;
            border: 1px solid #000000;
        }
    </style>
    <script src="../jquery-1.11.1/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(function(){
            var qu_bj = ["西二旗", "西三旗", "回龙观"];
            var qu_sy = ["沈北新区", "和平区", "皇姑区"];
            for(var i = 0; i < qu_bj.length; i++){
                var $opt = $("<option></option>");
                $opt.html(qu_bj[i]);
                $opt.attr("value", qu_bj[i]);
                if(qu_bj[i] == "西二旗"){
                    $opt.attr("selected", "selected");
                }
                $("#qu").append($opt);
            }

            $("#city").change(function(){
                var city = $("#city").val();
                if(city == "北京"){
                    add_opt(qu_bj);
                }else if(city == "沈阳"){
                    add_opt(qu_sy);
                }
            })
            function add_opt(arr){
                $("#qu").children().remove();
                for(var i = 0; i < arr.length; i++){
                    var $opt = $("<option></option>");
                    $opt.html(arr[i]);
                    $opt.attr("value", arr[i]);
                    $("#qu").append($opt);
                }
            }

            function ghbs(){
                $("#mytbody tr:even").css("background-color", "brown");
                $("#mytbody tr:odd").css("background-color", "burlywood");
            }

            $("#sub").click(function(){
                var name = $("#name").val();
                var reg1 = /^[\x00-\xff]{3,30}$/;
                var flag1 = false;
                if(reg1.test(name)){
                    alert("姓名必须为3-30个汉字");
                    flag1 = false;
                }else{
                    flag1 = true;
                }
                var sex = $("#sex").val();
                //alert(sex);
                var birth = $("#birth").val();
                var flag2 = false;
                if(birth.trim() == "" || birth == null){
                    alert("生日不能为空");
                    flag2 = false;
                }else{
                    flag2 = true;
                }
                var city = $("#city").val();
                var qu = $("#qu").val();

                if(flag1 && flag2){
                    $("#mytable").attr("style", "display=block");
                    var $mytr = $("<tr></tr>");
                    var $mytd1 = $("<td></td>");
                    var $mycb = $("<input type='checkbox' />");
                    $mytd1.html($mycb);
                    var $mytd2 = $("<td></td>");
                    $mytd2.html(name);
                    var $mytd3 = $("<td></td>");
                    $mytd3.html(sex);
                    var $mytd4 = $("<td></td>");
                    $mytd4.html(birth);
                    var $mytd5 = $("<td></td>");
                    $mytd5.html(city+"-"+qu);
                    var $mytd6 = $("<td></td>");
                    var $mybtn = $("<button>删除</button>");
                    $mybtn.click(function(){
                        var isDel = confirm("是否确定删除？");
                        if(isDel){
                            $mybtn.parent().parent().remove();
                            ghbs();
                            if($("#mytbody").children() == 0){
                                $("#mytable").attr("style", "display=none");
                            }
                        }
                    })
                    $mytd6.html($mybtn);
                    $mytr.append($mytd1);
                    $mytr.append($mytd2);
                    $mytr.append($mytd3);
                    $mytr.append($mytd4);
                    $mytr.append($mytd5);
                    $mytr.append($mytd6);
                    $("#mytbody").append($mytr);
                    ghbs();
                }
            })

            $("#quan_fan").click(function(){
                if($("input[type='checkbox']:checked").length == 0){
                    $("input[type='checkbox']").each(function(){
                        $(this).prop("checked", true);
                    })
                }else{
                    $("input[type='checkbox']").each(function(){
                        if($(this).is(":checked")){
                            $(this).prop("checked", false);
                        }else{
                            $(this).prop("checked", true);
                        }
                    })
                }
            })

            $("#p_shan").click(function(){
                if($("input[type='checkbox']:checked").length == 0){
                    alert("需要先选中数据！");
                }else{
                    var isDel = confirm("是否确定删除？");
                    if(isDel){
                        $("input[type='checkbox']:checked").parent().parent().remove();
                    }
                }
            })
        })
    </script>
</head>
<body>
姓名:<input id="name" type="text"/>
&nbsp;&nbsp;
性别:<select id="sex" style="height: 20px;">
    <option value="男">男</option>
    <option value="女">女</option>
</select>
&nbsp;&nbsp;
生日:<input id="birth" type="text" />
&nbsp;&nbsp;
住址:<select id="city">
    <option value="北京" selected="selected">北京</option>
    <option value="沈阳">沈阳</option>
</select>
<select id="qu"></select>
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" id="sub" value="提交" /><br />
<button id="quan_fan" style="margin-left: 650px;margin-top: 10px;">全选/反选</button>
<button id="p_shan" style="margin-left: 20px;margin-top: 10px;">批量删除</button>

<table id="mytable" style="margin-top: 30px;display: none;" border="1px" cellspacing="0">
    <thead>
    <tr>
        <th>选择</th>
        <th>姓名</th>
        <th>性别</th>
        <th>生日</th>
        <th>住址</th>
        <th>删除</th>
    </tr>
    </thead>
    <tbody id="mytbody"></tbody>
</table>
</body>
</html>

gh323093

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS省市联动

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> #sub{ background: chartreuse; width: 80px; height: 30
复制链接

扫一扫