js 表格查询+升序降序+敏感词

最新推荐文章于 2024-11-19 17:25:04 发布

原创最新推荐文章于 2024-11-19 17:25:04 发布 · 425 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>周考3练习</title>
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

        <style type="text/css">
           .content {
               margin-top: 20px;
               display: flex;
               flex-direction: row;
           }

           .left {
               flex: 1;
           }

           .right {
               flex: 1;
           }

           .left input {
               width: 400px;

           }

           .right select {
               width: 400px;

           }

           table {
               margin-top: 20px;
               width: 900px;
           }

           #add {
               margin-top: 20px;
               background: #33CCFF;
               border-radius: 5px;
               width: 80px;
               height: 30px;
           }
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       姓名:<input type="text" id="name" />
       位置:<input type="text" id="weizhi" />
       球号：<input type="text" id="qiuhao" />
       票数:<input type="text" id="piaoshu" /><br>
       <div class="content">
           <div class="left">
               <span>
           查询
       </span><br>
       
               <input type="text" ng-model="key" placeholder="请输入查询姓名关键字" id="chaName"/>
           </div>
           <div class="right">
               <span>
           排序
       </span><br>
       <select ng-model="xuanxiang" ng-options="x for x in names" ng-init="xuanxiang = names[0]" ng-change="change()">
       </select>
           </div>
       </div>

       <input class="button-dark" type="button" id="add" value="添加球员" ng-click="add()" />

       <table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped">
           <tr style="background: #999999;" ng-class="{{bold}}">
               <td>姓名</td>
               <td>位置</td>
               <td>球号</td>
               <td>票数</td>
           </tr>
           <tr ng-repeat="p in data | filter: {name:key} |orderBy:data.predicate">
               <td>{{p.name | myFilter}}</td>
               <td>{{p.sex}}</td>
               <td>{{p.age}}</td>
               <td>{{p.score}}</td>
           </tr>
       </table>
   </body>
   <script type="text/javascript">
       var app = angular.module("myApp",[]);
       app.controller("myCtrl",function($scope){
       $scope.bold = "bold";
      $scope.key = '';
      $scope.data = [
      { name: "张明明", sex: "控制后卫", age: 11, score: 975},
      { name: "沥青四", sex: "大前锋", age: 21, score: 365},
      { name: "刘晓华", sex: "小前锋", age: 23, score: 999},
      { name: "陈仲忠", sex: "中锋", age: 10, score: 888}
      ];
           $scope.names =["升序","降序"];
           $scope.change= function(){
               var xz = $scope.xuanxiang;
               if(xz=="升序"){
                $scope.data.predicate='score';
                     }else{
                  $scope.data.predicate='-score';
                         }
           }
           $scope.add=function(){
               var name = $("#name").val();
               var weizhi = $("#weizhi").val();
               var qiuhao = $("#qiuhao").val();
               var piaoshu = $("#piaoshu").val();
               if(name==""){
                   alert("名字不能为空");
                   return;
               }
               for (var i = 0; i < $scope.data.length ; i++) {
                   var p = $scope.data[i];
                   var pname = p.name;

                   if(name==pname){
                       alert("名字重复");
                       return;
                   }
               }
               var newData={
                   "name":name,
                   "sex":weizhi,
                   "age":qiuhao,
                   "score":piaoshu
               };
               $scope.data.push(newData);
           }

       });
       app.filter("myFilter",function(){

                   return function(input){//input 就是要过滤的数据


                       var newInput = input.replace(/明/g,"*");//参数1：正则，要替换的内容   参数2：新的内容

                       return newInput;
                   }

               });//参数1：过滤器的名字，参数2.方法
   </script>
</html>