js的隔行换色排序

最新推荐文章于 2022-08-07 17:29:13 发布
dreamflylb
最新推荐文章于 2022-08-07 17:29:13 发布
阅读量277
点赞数
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
         .left{
            float: left;
         }
         .right{
            float: right;
         }
         .even{
            background-color: blue;
         }
         .odd{
            background-color: red;
         }
         .first{
            background-color: yellow;
         }
         .f{
            background-color: pink;
         }
         .d{
            background-color: green;
         }
      </style>
      <script type="text/javascript" src="../jQuery-2.1.0/jquery-2.1.0.js" ></script>
      <script type="text/javascript" src="../AngularJS/angular.js" ></script>
      <script type="text/javascript" src="../AngularJS/angular-route.js" ></script>
      <script>
         $(function(){
            $("thead tr").addClass("first");
            $("tbody tr:even").addClass("even");
            $("tbody tr:odd").addClass("odd");
            
            $("tbody tr").mousemove(function(){
               //alert("asdf");
               $(this).addClass("f");
            });
            $("tbody tr").mouseout(function(){
               //alert("asdf");
               $(this).removeClass("f");
            });
            $("#tr td").mousedown(function(){
               //alert("asdf");
               $(this).addClass("d");
            });
            $("#tr td").mouseup(function(){
               //alert("asdf");
               $(this).removeClass("d");
            });
         });
      </script>
      <script>
         var app = angular.module("myApp",["ngRoute"]);
         //定义路由器
         app.config(["$routeProvider",function($routeProvider){
            //使用$routeProvider服务，配置路由规则
            $routeProvider
               .when("/addPlayer",{
                  controller:"addPlayerCtrl",
                  templateUrl:"addPlayer.html"
               })
               .otherwise({redirectTo:"/addPlayer"});
         }]);
         //自定义过滤器
         app.filter("myFilter",function(){
            return function(text){
               if(text.indexOf("敏感字符")>=0){
                  //替换字符串
                  return text.replace(/敏感字符/g,"****");
               }else{
                  return text;
               }
            }
         });
         
         app.controller("myCtrl",function($scope,$location){
            //定义数据源
            $scope.players = [{
               name:"张三",
               place:"控球后卫",
               num:11,
               ticket:999
            },{
               name:"李四",
               place:"大前锋",
               num:21,
               ticket:888
            },{
               name:"王五",
               place:"小前锋",
               num:23,
               ticket:777
            },{
               name:"赵六",
               place:"中锋",
               num:10,
               ticket:666
            },{
               name:"周七",
               place:"得分后卫",
               num:1,
               ticket:555
            }];
            
            $scope.order = "-ticket";
            
            //点击事件触发路由路径：跳转
            $scope.goToUrl = function(){
               $location.path("/addPlayer");
            }
         });
         
         //添加用户的控制器
         app.controller("addPlayerCtrl",function($scope){
            $scope.name = "";
            $scope.place = "";
            $scope.num = "";
            $scope.ticket = "";
            //点击添加按钮，执行sub方法
            $scope.sub = function(){
               var flag1 = flag2 = flag3 = flag4 = false;
               
               if($scope.name == null || $scope.name == ""){
                  alert("球员名不能为空");
                  flag1 = false;
               }else {
                  var flag = true;
                  for(player in $scope.players){
                     if($scope.players[player].name == $scope.name){
                        alert("重复")
                        flag = false;
                        flag1 = false;
                     }
                     
                  }
                  if(flag){
                     flag1 = true;
                  }else{
                     
                  }
               }
               if($scope.place == null || $scope.place == ""){
                  alert("位置不能为空");
                  flag2 = false;
               }else{
                  flag2 = true;
               }
               if($scope.num == null || $scope.num == ""){
                  alert("球号不能为空");
                  flag3 = false;
               }else{
                  flag3 = true;
               }
               if($scope.ticket == null || $scope.ticket == ""){
                  alert("票数不能为空");
                  flag4 = false;
               }else{
                  flag4 = true;
               }
               
               //判断添加用户
               if(flag1 && flag2 && flag3 && flag4){
                  //如果都为true即输入框都不为空，添加用户
                  var palyer = {
                     name:$scope.name,
                     place:$scope.place,
                     num:$scope.num,
                     ticket:parseInt($scope.ticket)
                  };
                  //将用户添加到数据源
                  $scope.players.push(palyer);
               }
            }
         });
      </script>
      
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
      <center>
         <div style="width: 500px;">
            <div class="left">
               查询<br/>
               <input type="text" ng-model="search "/>
            </div>
            <div class="right">
               排序<br/>
               <select ng-model="order">
                  <option value="-ticket">票数倒叙</option>
                  <option value="ticket">票数正叙</option>
                  <option value="-num">球号倒叙</option>
                  <option value="num">球号正叙</option>
               </select>
            </div>
         </div>
         <button ng-click="goToUrl()" style="margin-top: 80px;">新增球员</button><br /><br />
         <table border="1 solid blue" cellpadding="20" cellspacing="0">
            <thead>
               <tr>
                  <th>姓名</th>
                  <th>位置</th>
                  <th>球号</th>
                  <th>票数</th>
               </tr>
            </thead>
            <tbody>
               <tr id="tr" ng-repeat="player in players | filter:search | orderBy:order">
                  <td>{{player.name}}</td>
                  <td>{{player.place}}</td>
                  <td>{{player.num}}</td>
                  <td>{{player.ticket}}</td>
               </tr>
            </tbody>
         </table>
         <br />
         <div ng-view>
            
         </div>
         
      </center>
      
      <!-- 添加球员显示页面 -->
      <script type="text/ng-template" id="addPlayer.html">
         <form>
            姓名:<input type="text" ng-model="name"/><br/>
            位置:<input type="text" ng-model="place"/><br />
            球号:<input type="text" ng-model="num"/><br />
            票数:<input type="text" ng-model="ticket"/><br />
            <input type="button" value="添加"  ng-click="sub()"/>
         </form>
      </script>
      
   </body>
</html>