文章标题球员表格（增查排序）

最新推荐文章于 2021-02-04 16:53:48 发布

龙图图

最新推荐文章于 2021-02-04 16:53:48 发布

阅读量251

点赞数

分类专栏：网页设计

本文链接：https://blog.csdn.net/xingyueyezi01/article/details/78350547

版权

网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.0.js"></script>
    <script src="angular.js"></script>
    <style>

        .even{
           background-color: darkgray;
        }
        .odd{
            background-color: honeydew;
        }
        .d{
            background-color: darkgray;
        }


      .a{ width: 800px}
        .b{width: 600px}
    </style>
    <script>
        $(function(){
            $("thead tr").addClass("first");
            $("tbody tr:even").addClass("even");
            $("tbody tr:odd").addClass("odd");
            $("thead tr").addClass("first");
     $("#tr th").mousedown(function () {
         $(this).addClass("d")
     });
     $("#tr th").mouseup(function () {
         $(this).removeClass("d")
     });

        });
    </script>
    <script>

        var app=angular.module("myAPP",[]);
        app.controller("myCtrl",function ($scope) {
            $scope.users=[
                {"id":1,"name":"张三","weizhi":"控球后卫","qiuhao":11,"piao":999},
                {"id":2,"name":"李四","weizhi":"大前锋","qiuhao":21,"piao":888},
                {"id":3,"name":"王五","weizhi":"小前锋","qiuhao":23,"piao":777},
                {"id":3,"name":"赵六","weizhi":"中锋","qiuhao":10,"piao":666},
                {"id":3,"name":"周七","weizhi":"得分后卫","qiuhao":1,"piao":555}
            ];



                $scope.name = "";
                $scope.weizhi = "";
                $scope.qiuhao = "";
                $scope.piao = "";
            $scope.sub = function () {

            }



                $scope.suba = function(){

                        var flag = true;
                        //拿到各个输入框的值
                        if($scope.name==""||$scope.name==null){
                            alert("用户名不能为空");
                            flag = false;
                        }
                        if($scope.weizhi==""||$scope.weizhi==null){
                            alert("位置不能为空");
                            flag = false;
                        }
                        if($scope.qiuhao==""||$scope.qiuhao==null){
                            alert("球号不能为空");
                            flag = false;
                        }
                        if($scope.piao==""||$scope.piao==null){
                            alert("票不能为空");
                            flag = false;

                        }



                    var newUser = {

                        name:$scope.name,
                        weizhi:$scope.weizhi,
                        qiuhao:$scope.qiuhao,
                        piao:$scope.piao
                    }
                    //添加新用户.
                    $scope.users.push(newUser);
                }
   $scope.order="-piao"
          /*  //自定义过滤器
            app.filter("myFilter",function(){
                return function(text){
                    if(text.indexOf("敏感字符")>=0){
                        //替换字符串
                        return text.replace(/敏感字符/g,"****");
                    }else{
                        return text;
                    }
                }
            });*/

        });
    </script>
</head>
<body ng-app="myAPP" ng-controller="myCtrl">
<center>
<div>

  <table>

      <tr>
          <td>查询</td>
          <td><input ng-model="search" type="text" size="10"/></td>
          <td>排序</td>

          <td> <select ng-model="order">
              <option value="-piao">票数倒数</option>
              <option value="+piao">票数整数</option>
          </select></td>
      </tr>
  </table>


</div><br><br/>
    <input style="background-color: lightseagreen; margin-bottom: 50px;" type="button" ng-click="suba()" value="新增球员" />


    <div>
        <table class="a" border="1" cellpadding="10" cellspacing="0">

            <thead>
            <tr id="tr">
                <th>姓名</th>
                <th>位置</th>
                <th>球号</th>
                <th>票数</th>

            </tr>
            </thead>
            <tbody>
            <tr  ng-repeat="user in users | filter:{'name':search} | filter:search | orderBy:order">
                <td>{{user.name}}</td>
                <td>{{user.weizhi}}</td>
                <td>{{user.qiuhao}}</td>
                <td>{{user.piao}}</td>

            </tr>
            </tbody>
        </table>
        </table>
    </div>



   <br><br/>
    <div>
        <form action="">
            <table class="b" border="1" cellspacing="0" cellpadding="10">
                <tr>
                    <th>用户名：</th>
                    <td><input ng-model="name" placeholder="请输入用户名" /></td>
                </tr>
                <tr>
                    <th>位置：</th>
                    <td><input ng-model="weizhi" placeholder="请输入位置" /></td>
                </tr><tr>
                <th>球号：</th>
                <td><input ng-model="qiuhao" placeholder="请输入球号" /></td>
            </tr><tr>
                <th>票数：</th>
                <td><input ng-model="piao" placeholder="请输入票数" /></td>
            </tr>

                <tr align="center">
                    <td colspan="2"><button style="background-color: lightseagreen" type="button" ng-click="suba()">新增球员</button></td>
                </tr>
            </table>
        </form>
    </div>




</center>
</body>
</html>

龙图图

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文章标题球员表格（增查排序）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.0.js"></script> <script src="angular.js"></script> <style> .even{
复制链接

扫一扫