jQuery简单表单判断，获取框中的数据动态到添加表格

最新推荐文章于 2020-10-16 19:26:20 发布

w98326angle

最新推荐文章于 2020-10-16 19:26:20 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签：二级联动 jQuery获取框中的数据添加表格表单的简单判断

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/w98326angle/article/details/78519262

本文展示了如何使用jQuery实现二级联动选择省份和城市，获取表单输入的姓名、邮箱和电话，对数据进行简单的格式验证，并将验证通过的数据动态添加到表格中。同时，还实现了点击删除按钮时确认删除表格行的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
   table{
    width: 400px;
   }
   .biao{
    width: 500px;
    margin-top: 60px;
   }
  </style>
  <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
  <script>
   $(function(){
   var cities = [
            ["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
            ["南京市","苏州市","扬州市","无锡市"],
            ["武汉市","襄阳市","荆州市","宜昌市","恩施市"],
            ["石家庄市","唐山市","保定市","邢台市","廊坊市"],
            ["长春市","吉林市","四平市","延边市"]];

var $city = $("#city");

        // 获得代表省份的下拉列表
        $("#province").change(function() {
            // alert(this.value);
            // alert($(this).val());

// 清空第二个列表中的内容
$city.get(0).options.length = 0;

            var val = this.value;
            // 遍历并且判断
            $.each(cities, function(i, n) {
                // 判断
                if(i == val) {
                    $(n).each(function(j, m) {
                        // alert(j + " " + m);
                        $city.append("<option>" + m + "</option>");
                    });
                }
            });
        });


    $("#btn").click(function(){
     var $name=$("#name").val();
     var $email=$("#email").val();
     var $telph=$("#tel").val();
     var $con=$("#province").find("option:selected").text();
     alert($con);
     var $city=$("#city").val();





     if($name!=""){
      if($email.indexOf("@")){
       alert("格式要正确");
      }else{

       if($telph.length>=8&&$telph.length<=11){
        if($con!=""){
         if($city!=""){

           /*创建行*/
          var tr=$("<tr></tr>");
          //创建列并把获取的值添加到列中
          var td1=$("<td></td>").html($name);
          var td2=$("<td></td>").html($email);
          var td3=$("<td></td>").html($telph);
          var td4=$("<td></td>").html($con);
          var td5=$("<td></td>").html($city);
          //在最后一列添加删除按钮
          var td6=$("<td><button>删除</button></td>")
          tr.append(td1);
          tr.append(td2);
          tr.append(td3);
          tr.append(td4);
          tr.append(td5);
          tr.append(td6);

          var thb=$("#myth");
          thb.append(tr);


          $("td button").unbind("click");
          $("td button").click(function(){
           if(confirm("是否删除当前用户？")){
            $(this).parent().parent().remove();
           }
          });


         }else{
          alert("城市不能为空");
         }
        }else{
         alert("省份不能为空");
        }
       }else{
        alert("电话长度8到11位");
       }
      }

     }else{
      alert("姓名不能为空");
     }




    });

   });
  </script>
</head>
<body>
  <h3>添加用户</h3>
  <form>
   <table border="1px">
    <tr>
     <td>姓名：</td>
     <td><input type="text" id="name" placeholder="请输入用户名"/></td>
    </tr>
    <tr>
     <td>email：</td>
     <td><input type="text" id="email" placeholder="请输入邮箱"/></td>
    </tr>
    <tr>
     <td>电话：</td>
     <td><input type="text" id="tel" placeholder="请输入手机号"/></td>
    </tr>
    <tr>
     <td>省份：</td>
     <td>
       <select id="province" name="province">
                                <option value="">-请选择-</option>
                                <option value="0">浙江省</option>
                                <option value="1">江苏省</option>
                                <option value="2">湖北省</option>
                                <option value="3">河北省</option>
                                <option value="4">吉林省</option>
                            </select>
     </td>
    </tr>
    <tr>
     <td>城市：</td>
     <td>
      <select id="city" name="city">
                            <option>-请选择-</option>
                        </select>
     </td>
    </tr>
    <tr align="center">

     <td colspan="2">
      <input type="button" value="添加" id="btn"/>
     </td>

    </tr>

   </table>


  </form>

  <table border="1px" class="biao">
   <thead>
    <tr>
     <td>姓名</td>
     <td>email</td>
     <td>电话</td>
     <td>省份</td>
     <td>城市</td>
     <td>操作</td>
    </tr>
   </thead>
   <tbody id="myth">

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

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。