表格增、查、排序、变颜色、重复

最新推荐文章于 2019-02-25 15:21:00 发布
JSHeng@
最新推荐文章于 2019-02-25 15:21:00 发布
阅读量312
点赞数 1
分类专栏： angularjs
本文链接：https://blog.csdn.net/jiaosheng1/article/details/78320150
版权
angularjs 专栏收录该内容
9 篇文章 0 订阅
订阅专栏
    <!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.js" ></script>
        <script type="text/javascript" src="angular.js" ></script>
        <script type="text/javascript" src="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>