表格的添加删除加省级联动效果

最新推荐文章于 2021-06-25 07:43:19 发布

weixin_39792151

最新推荐文章于 2021-06-25 07:43:19 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/weixin_39792151/article/details/78513785

版权

<!DOCTYPE html>
<html ng-app="app">
   <head>
       <meta charset="utf-8" />
       <title></title>
          <style>
           span{
               font-family: 楷体;
               font-size: 14px;
               color: red;
           }
           select{
               width: 150px;
               height: 20px;
           }
           a{
               text-decoration: none;
           }
       </style>
       <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
   <script type="text/javascript" src="js/angular.min.js" ></script>
       <script>
           //angularjs处理省级联动
           angular.module("app",[]).controller("mycontr",function($scope){
               $scope.shengname=["北京","江苏","河南"];
               $scope.selectCh=function(){
                   var yxsheng=$scope.yixuansheng;
                   if(yxsheng==="北京"){
                      $scope.shiarr=["房山","黄埔","朝阳","海淀"];
                   }else if("江苏"===yxsheng){
                       $scope.shiarr=["苏州","淮安","宿迁","南京"];
                   }else if("河南"===yxsheng){
                      $scope.shiarr=["安阳","郑州","洛阳","驻马店"];
                   }
               }
           });
           $(function(){
               //点击按钮验证判断
               $("#but").click(function(){
                   var name=$("#name").val();
                   var email=$("#email").val();
                   var tel=$("#tel").val();
                   var sheng=$("#sheng option:selected").val();
                   var shi=$("#shi option:selected").val();
                   var mytable=$("#mytable");
                   var kai1=false;
                   var kai2=false;
                   var kai3=false;
                   if(name!=null&name!=""){
                       kai1=true;
                   }
                   if(email.match("@")){
                       kai2=true;
                   }
                   var tt=parseInt(tel);
                   if(tel==tt&tel.length==11){
                       kai3=true;
                   }
                   if(kai1&kai2&kai3){
                       var tr=$("<tr><td>"+name+"</td><td>"+email+"</td><td>"+tel+"</td><td>"+sheng+"</td><td>"+shi+"</td><td><a href='#' οnclick='shan(this)'>Delete</a></td></tr>");
                       mytable.append(tr);
                       mytable[0].style.display="block"
                   }else{
                       alert("姓名或email或电话验证不通过!")
                   }
               });
           });

           //点击删除
           function shan(obj){
               var tr=$(obj).parent().parent();
               tr.remove();
               var size=$("#mytable tr").length;
               if(size==1){
                   $("#mytable")[0].style.display="none"
               }
           }
       </script>
   </head>
   <body>

       <form>
           <table width="400px" style="margin: auto;" ng-controller="mycontr">
               <tr>
                   <td colspan="2" style="text-align: center;"><h2>添加用户</h2></td>
               </tr>
               <tr style="text-align: center;">
                   <td>姓名:</td>
                   <td><input type="text" id="name" placeholder="请输入用户名" />
                   <span></span>
                   </td>
               </tr>
               <tr style="text-align: center;">
                   <td>email:</td>
                   <td><input type="text" id="email" placeholder="请输入email"/>
                   <span></span>
                   </td>
               </tr>
               <tr style="text-align: center;">
                   <td>电话:</td>
                   <td><input type="text" id="tel" placeholder="请输入手机号"/>
                   <span></span>
                   </td>
               </tr>
               <tr style="text-align: center;">
                   <td>省份:</td>
                   <td>
                       <select id="sheng" ng-change="selectCh()" ng-model="yixuansheng">
                           <option value="" style="display: none;">---请选择---</option>
                           <option ng-repeat="ss in shengname">{{ss}}</option>
                       </select>
                   </td>
               </tr>
               <tr style="text-align: center;">
                   <td>城市:</td>
                   <td>
                       <select id="shi">
                           <option value="" style="display: none;">---请选择---</option>
                           <option ng-repeat="shi in shiarr">{{shi}}</option>
                       </select>
                   </td>
               </tr>
               <tr style="text-align: center;">
                   <td ><input type="submit" id="but" value="添加"/> </td>
               </tr>
           </table>
       </form>
       <br />
       <br />
       <table width="500px" border="1" id="mytable" style="margin: auto;display: none;">
           <tr style="text-align: center;">
               <th>姓名</th>
               <th>email</th>
               <th>电话</th>
               <th>省份</th>
               <th>城市</th>
               <th>删除</th>
           </tr>
       </table>

   </body>
</html>