您的位置：首页 > 其它

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

2017-11-12 19:03 274 查看

<!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='#' onclick='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>

       </t
4000
able>



   </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航