js的隔行换色排序

来源：互联网发布：买空卖空的淘宝包邮编辑：程序博客网时间：2024/06/05 02:43
<!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>
阅读全文
0 0
js的隔行换色 排序

js的隔行换色排序
