注册用户

最新推荐文章于 2022-10-23 14:01:59 发布

人道烘炉_L

最新推荐文章于 2022-10-23 14:01:59 发布

阅读量266

点赞数

本文链接：https://blog.csdn.net/My_emotions_L/article/details/78514006

版权

<!DOCTYPE html>
<html>
   <head lang="en">
       <meta charset="utf-8" />
       <title></title>
       <style>
           .mask{
               position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 100%;
                  height: 100%;
                  background: #000;
                  opacity: 0.5;
                  display: none;
           }
           .form-add {
                  width: 300px;
                  height: 200px;
                  position: fixed;
                  top: 30%;
                  left: 50%;
                  margin-left: -197px;
                  padding-bottom: 20px;
                  background: #fff;
                  display: none;
           }

       </style>
       <script src="js/jquery-1.11.1.js" ></script>
       <script>
      $(function(){
          var shengfen = [["哈尔滨", "齐齐哈尔"], ["威海", "烟台"]];
               //给省份选项改变的事件
               $("#pro").change(function() {
                   //清空上次
                   $("#cityx").siblings().remove();
                   var sheng = $(this).val();//省份对应value
                   for(var i = 0; i < shengfen[sheng].length; i++) {
                       var $o = $("<option></option>");//创建option标签
                       $o.html(shengfen[sheng][i]);
                       $("#city").append($o);
                   }
               });


           var flag = true;
           $("#sub").click(function(){
               if($("#name").val() === ""){
                    alert("内容不能为空！");
                    return flag = false;
                }

                 var ret = /@/;
               if(ret.test($("#email").val())){

                }else{
                   alert("邮箱格式不符");
                    return flag = false;
                }
                var pw=/^\d{8,11}$/

               if(!(pw.test($("#pwd").val()))){
                    alert("电话号码验证长度在8-11位之间");
                    return flag = false;
                }
               if($("#pro").val() === ""){
                    alert("省份内容不能为空！");
                    return flag = false;
                }
               if($("#city").val() === ""){
                    alert("城市内容不能为空！");
                    return flag = false;
                }

               if(flag){
                  var tr = $("<tr></tr>");
                //赋值
                if ($("#pro").val()==0) {
                   var p="黑龙江省";
                } else{
                   var p="山东省";
                }
                tr.html('<td>'+$("#name").val()+'</td><td>'+$("#email").val()+'</td><td>'+$("#pwd").val()+'</td><td>'+p+'</td><td>'+$("#city").val()+'</td><td><a href="#">Delete</a></td>');
                //在房间tbody中
                $("#mytable").append(tr);


                //bug3：新产生的tr没有时间绑定
                 tr.find("a").click(function () {
                    var ab=$(this).parent("td").parent("tr");

                   var r=confirm("是否删除");
                   if (r==true){
                       ab.remove();
                   }
                   else{
                       x="你按下了\"取消\"按钮!";
                   }
                   document.getElementById("demo").innerHTML=x;

                });

               }

           });
        });

       </script>
   </head>
   <body>
       <div class="aa" id="aa">
           <form>
       <table >
        <caption >添加用户

        </caption>
        <tbody >
            <tr>
                <td>
                    姓名
                </td>
                <td><input type="text" id="name"/></td>

            </tr>

            <tr>
                <td>
                    邮箱
                </td>
                <td><input type="text" id="email"/></td>

            </tr>
            <tr>
                <td>
                    电话号码
                </td>
                <td><input type="text" id="pwd"/></td>

            </tr>
            <tr>
                <td>
                    省份
                </td>
                <td>
                   <select id="pro">
                       <option>---请选择省份</option>
                       <option value="0">黑龙江省</option>
                       <option value="1">山东省</option>
                   </select>

               </td>

            </tr>
            <tr>
                <td>
                    城市
                </td>
                <td>
                   <select id="city">
                       <option id="cityx">---请选择城市</option>
                   </select>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="button" value="添加" id="sub" οnclick="show()"/>
                </td>
            </tr>
        </tbody>
   </table>
   </form>
   <br/>
    <table border="1px">
        <tbody id="mytable">
            <tr>
                <td>
                    账号
                </td>
                <td>邮箱</td>
                <td>
                    电话号码
                </td>
                <td>
                    省份
                </td>
                <td>
                    城市
                </td>
                <td>

                </td>
            </tr>

        </tbody>
        </table>

   </body>
</html>