angularjs表格的增删改查完成功能

最新推荐文章于 2020-12-22 04:29:33 发布

weixin_39792151

最新推荐文章于 2020-12-22 04:29:33 发布

阅读量1k

点赞数

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

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

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           .gehang:nth-child(even){
               background-color: blueviolet;
           }


       </style>
       <script src="js/angular.min.js"></script>

<script src="js/jquery-2.1.0.js"></script>

//鼠标停止改变颜色

<script>
           $(function(){
               $("tr").mouseenter(function(){
                       $(this).css("background-color","yellow").siblings().css("background-color","");
               });
           $("table").mouseleave(function(){
              $(this).children("tbody").eq(0).children("tr").css("background-color","");
           })
           });


       </script>

       <script>
           angular.module("myapp",[])
           .controller("democ",function($scope,$filter){
               $scope.datas=[{
                   name:"张三",
                   age:"45",
                   piny:"zhangsan",
                   zhiwei:"总经理",

               },{
                   name:"李四",
                   age:"43",
                   piny:"lisi",
                   zhiwei:"设计师",

               },{
                   name:"王五",
                   age:"40",
                   piny:"wangwu",
                   zhiwei:"工程师",

               }];
               //删除
               $scope.shan=function(i){
                   if(confirm("是否删除")){
                       $scope.datas.splice(i,1);
                       confirm("删除成功")
                   }
               }
               //点击添加显示出来
               $scope.addAll=function(){
                   $scope.isshow=true;
               }

               $scope.name="";
               $scope.age="";
               $scope.piny="";
               $scope.zhiwei="";

               $scope.chAll=function(v1,v2,v3,v4){
                  if(parseInt(v2)==v2){
                      $scope.datas.push({
                       name:$scope.name,
                       age:$scope.age,
                       piny:$scope.piny,
                       zhiwei:$scope.zhiwei,

                       });
                       $scope.isshow=false;
                  }else{
                      alert("年龄格式错误")
                  }
               }
                //查找，判断敏感词
               $scope.a="";
               $scope.cha=function(){
                   if($scope.a==""||$scope.a==null){
                       alert("请输入姓名")
                   }else{
                       if($scope.a.match("鸡")){
                           alert("内容有敏感词")
                       }else{
                           var f=$filter("filter");
                           var shu=f($scope.datas,{name:$scope.a});
                           if(shu.length==0){
                               alert("未找到内容")
                           }else{
                               $scope.datas=shu;
                           }
                       }
                   }

               }

           });

       </script>
   </head>
   <body ng-app="myapp" ng-controller="democ">
       姓名查询条件:<input ng-model="a" />
       <select style="margin-left: 60px;">
          <option >按年龄排序</option>
          <option>45</option>
              <option>43</option>
                  <option>40</option>
       </select>
       <table border="1" style="width: 500px; height: 50px;">
          <tr style="background-color: darkgrey;">
              <th >姓名</th>
              <th ng-click="title='age';desc=!desc">年龄</th>
              <th>拼音</th>
              <th>职位</th>
              <th>操作</th>

          </tr>
          <tr ng-repeat="dat in datas|orderBy:title:desc" class="gehang">
              <td>{{dat.name}}</td>
              <td>{{dat.age}}</td>
              <td>{{dat.piny}}</td>
              <td>{{dat.zhiwei}}</td>
              <td><span style="cursor:pointer;" ng-click="shan($index)">删除</span></td>

          </tr>

       </table>
       <button ng-click="cha()">查询</button>
          <button ng-click="addAll()">添加用户</button>
          <form ng-show="isshow">
              姓名:<input ng-model="name" /><br />
               年龄:<input ng-model="age" /><br />
                拼音: <input ng-model="piny" /><br />
                职位:<input ng-model="zhiwei" /><br />

              <button style="margin-left: 60px;" ng-click="chAll(name,age,piny,zhiwei)">保存</button>
          </form>
   </body>
</html>

weixin_39792151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
angularjs表格的增删改查完成功能

.gehang:nth-child(even){ background-color: blueviolet; } angular.module("myapp",[])
复制链接

扫一扫

评论 1

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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