姓名+年龄+性别+密码+住址判断添加到表格(批量删除)

最新推荐文章于 2022-03-31 17:35:01 发布

qimingnanhhh

最新推荐文章于 2022-03-31 17:35:01 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qimingnanhhh/article/details/78514122

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="jQuery/jquery-2.1.1.js" ></script>
        <script>
            $(function(){
                var arr = [
                        ["东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆" ]
                        ,
                        ["黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明"]
                        ,
                        ["和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县" ]
                        ,
                        ["万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川"]
                        ];

                var nameid=$(".nameid");
                var sheng=$("#sheng");
                var mm=$(".mmid");
                var nl=$(".nlid");
                var sex=$("")
                var flag1 = false;
                var flag2 = false;
                var flag3 = false;
                var flag4 = false;
                nameid.blur(function(){
                    if(nameid.val()==null||nameid.val()==""){
                    alert("用户姓名不能为空");
                    flag1=false;
                }else{
                    flag1=true;
                }
                });
                mm.blur(function(){
                    if(mm.val().length<4||mm.val().length>16){
                    alert("密码长度必须在4-16位之间");
                    flag2=false;
                }else{
                    flag2=true;
                }
                });

                nl.blur(function(){
                    var nl1=parseInt(nl.val());
                    if(isNaN(nl1)){
                    alert("年龄必须为数字");
                    flag3=false;
                }else{
                    flag3=true;
                }
                });

//              if($("input[name=='sex'").is("checked")){
//                  
//                  $("#form").submit();
//              }else{
//                  alert("请选择性别");
//              }

                sheng.change(function(){

                    $("#shi option").remove();
                    var ind=$(this).val();
                    alert(ind);
                    for(c in arr[ind]){
                    var $c2=$("#shi");
                    var cs=$("<option>"+arr[ind][c]+"</option>");
                    $c2.append(cs);
                    }

                });

                $(".tj").click(function(){



                if(flag1 && flag2 && flag3){
                    var name=$(".nameid").val();
                    var mm = $(".mmid").val();
                        var nl = $(".nlid").val();
                    var $sexV = $("input[name='sex']:checked").val();
                    var $cityV = $("#sheng option:selected").html();
                        var $city2V = $("#shi option:selected").html();
                        var $data = $("#data");
                    var $a = $("<tr><td><input type='checkbox'></td><td>"+name+"</td><td>"+mm+"</td><td>"+nl+"</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").not("[id]").parent().parent().remove();
                });
            });
        </script>
    </head>
    <body>
        <form>
            用户名:<input type="text" class="nameid"/><br />
            密    码:<input type="password" class="mmid"/><br />
            年    龄:<input type="number" class="nlid"/><br />
            性别:<input type="radio"  name="sex" checked="checked" value="男"/>男<input type="radio" name="sex" value="女"/>女<br />
            住址:省<select  id="sheng">
                <option value=0>北京</option>
                <option value=1>上海</option>
                <option value=2>广东</option>
                <option value=3>深圳</option>

            </select>市<select  id="shi">
                <option >海淀区</option>
                <option >丽江区</option>
                <option>莆田区</option>
                <option >金水区</option>

            </select><br />


        </form>
        <input type="submit" value="提交" class="tj"/>
        <button id="del">批量删除</button>
        <table border="1px solid #000" cellpadding="0" cellspacing="0" id="data">
            <tr>
                <td><input type="checkbox" id="all"></td>
                <td>用户名</td>
                <td>密码</td>
                <td>年龄</td>
                <td>性别</td>             
                <td>住址</td>

            </tr>



        </table>
    </body>
</html>

qimingnanhhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
姓名+年龄+性别+密码+住址判断添加到表格(批量删除)

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jQuery/jquery-2.1.1.js" ></script> <script> $(
复制链接

扫一扫