程序博客网 > 手机淘宝充值中心

angular jQuery css html混合table表格查询排序添加删除隔行换色

来源：互联网发布：手机淘宝充值中心编辑：程序博客网时间：2024/06/05 05:38

//第一步还是要导包

<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>

//head的布局和控制

<style type="text/css">
   .xs{
     cursor: pointer;
   }
    .first{
            background-color:darkgrey;
        }
        tbody tr:nth-child(odd){
            background-color:lightgrey;
        }
        tbody tr:nth-child(even){
            background-color:azure;
        }
         table tr:hover{background-color:darkturquoise;
  </style>
<script>
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){

     $(function () {
            /* 表格第一行变天蓝色     */
            $("thead tr").addClass("first");
        });

        $(function(){
        $("button").addClass("xs");
        })
        //先在表格里添加一些数据
    $scope.position = [{
     name:"张三",
     age:45,
     pinyin:"zhang san",
     zhiwei:"总经理"
    },{
     name:"李四",
     age:43,
     pinyin:"li si",
     zhiwei:"设计师"
    },{
     name:"王五",
     age:40,
     pinyin:"wang wu",
     zhiwei:"工程师"
    },{
     name:"赵六",
     age:33,
     pinyin:"zhao liu",
     zhiwei:"工程师"
    },{
     name:"周七",
     age:32,
     pinyin:"zhou qi",
     zhiwei:"人事经理"
    }];

    //过滤姓名
    $scope.name = "";
    $scope.flag = "";
    $scope.flag2 = false;
    $scope.filName = function(){
     if($scope.name.indexOf("法轮功")>=0){
      alert("不能包含敏感字符");
      return false;
      //$scope.flag = "";
     }
     if($scope.name == ""){
      alert("请输入姓名");
      $scope.flag = "";
     }else{
      for(index in $scope.position){
       if($scope.name == $scope.position[index].name){
        $scope.flag = $scope.name;
        $scope.flag2 = true;
       }else{

       }
      }
     }

     if(!$scope.flag2){
      alert("没有找到匹配项");
     }
    }

    //确定用户提交页面显示隐藏
    $scope.isShow = false;
    $scope.show = function(){
     if($scope.isShow){
      $scope.isShow = false;
     }else{
      $scope.isShow = true;
     }
    }

    //验证age--->angular形式
    $scope.newAge = "";
    $scope.newName = "";
    $scope.newPinyin = "";
    $scope.newPos = "";
    $scope.checkAge = function(){
     if($scope.newAge == "" || $scope.newAge == null){
      alert("年龄不能为空");
     }else if(isNaN($scope.newAge)){
      alert("年龄格式不正确")
     }else if($scope.newAge<0 || $scope.newAge>150){
      alert("输入的不是人的年龄")
     }else{
      var peo = {
       name:$scope.newName,
       age:$scope.newAge,
       pinyin:$scope.newPinyin,
       zhiwei:$scope.newPos
      };
      $scope.position.push(peo);
     }
    }

    //点击删除按钮, 删除当前商品
    $scope.delProduct = function(delName){
     for(index in $scope.position){
     if (delName == $scope.position[index].name) {
      if(confirm("确定删除吗?") == true){
       $scope.position.splice(index,1);
      }else{
       return false;
      }
     } else{
      return false;
    }
   }
  }


});
  </script>

//下面数页面展示的布局

<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   <h3>用户列表</h3>
   用户名查询：<input type="text" ng-model="name"/>
   <select ng-model="ageOrder">
    <option value="">--请选择--</option>
    <option value="age">年龄正序</option>
    <option value="-age">年龄倒序</option>
   </select><br />
   用户列表<br />
   <table border="1px solid blue" cellpadding="10" cellspacing="0">
    <thead>
     <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>拼音</th>
      <th>职位</th>
      <th>操作</th>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat="pos in position | filter:flag | orderBy:ageOrder">
      <td>{{pos.name}}</td>
      <td>{{pos.age}}</td>
      <td>{{pos.pinyin}}</td>
      <td>{{pos.zhiwei}}</td>
      <td><button ng-click="delProduct(pos.name)">删除</button></td>
     </tr>
    </tbody>
   </table><br />
   <button ng-click="filName()">查询</button>
   <button ng-click="show()">添加用户</button><br /><br />
   <div ng-show="isShow">
    <h3>添加用户</h3>
    用户名：<input type="text" placeholder="请输入用户名" ng-model="newName"/><br /><br />
    拼　音：<input type="text" placeholder="请输入拼音" ng-model="newPinyin"/><br /><br />
    年　龄：<input type="text" placeholder="请输入年龄" ng-model="newAge"/><br /><br />
    职　位：<input type="text" placeholder="请输入职位" ng-model="newPos"/><br /><br />
    <input type="button" ng-click="checkAge()" value="提交" />
   </div>
  </center>
</body>

阅读全文

0 0

手机淘宝充值中心

手机淘宝充值中心

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子雀多音字组词和拼音口腔音和舔耳80分钟喷多音字组词和拼音晃多音字组词和拼音骨多音字组词和拼音清辅音和浊辅音对照表咽多音字组词和拼音和多音字怎么组词几多音字组词和拼音任多音字组词和拼音稍多音字组词和拼音抖音2019超火汤姆和杰瑞图片我和你荡秋千抖音图片前鼻音后鼻音音名和唱名和字多音字组词和音杨洛和贝音瑶结局如何发多音字组词和拼音单元音和双元音前鼻音和后鼻音发音图解哼多音字组词和读音hng 称多音字组词和拼音哄多音字组词和拼音采音下属音网音处的多音还音轩子2巨兔口腔音和舔耳区别和顺晋中和顺和顺电气和顺县板城和顺山西和顺腾冲和顺和顺信息网和顺蛋糕店丛台红和顺和顺客栈