表格增、查、排序敏感字、颜色完美

最新推荐文章于 2023-10-09 22:44:26 发布

JSHeng@

最新推荐文章于 2023-10-09 22:44:26 发布

阅读量321

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/jiaosheng1/article/details/78322295

版权

angularjs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: auto;
                padding: 0;
            }
            body{
                text-align: center;
                margin: 50px auto;
            }
            table
            {
                margin-top: 30px;
            }
            .btn
            {
                background: cornflowerblue;
                width: 100px;
                height: 50px;
            }
            tr:nth-child(2n){
                background: #666;
            }
        </style>
        <script src="angular.js"></script>
        <script>
            //主模板
            var myapp=angular.module("myapp",[]);
            //控制器
            myapp.controller("myCtrl",function ($scope) {

                $scope.data=[
                    {name:"张三",wei:"控球后卫",hao:"11",piao:"999"},
                    {name:"李四",wei:"大前锋",hao:"21",piao:"888"},
                    {name:"王五",wei:"小前锋",hao:"23",piao:"777"},
                    {name:"赵六",wei:"中锋",hao:"10",piao:"666"},
                    {name:"周七",wei:"得分后卫",hao:"1",piao:"555"},
                ]
                $scope.name="";
                $scope.search2="";
                $scope.$watch("name",function (value) {
                    if(value.indexOf("枪")!=-1)
                    {
                        alert("含有敏感字!!!");
                        $scope.name="";
                    }
                    else
                    {
                        $scope.search2=$scope.name;
                    }
                })
                $scope.order="-请选择-";
                //排序
                $scope.pai=function () {
                    if( $scope.order!="-请选择-")
                    {
                        if( $scope.order=="票数正序")
                        {
                            console.log("0");
                            return false;
                        }
                        else
                        {
                            return true;
                        }
                    }
                    return false;
                }
                //添加球员
                $scope.show=false;
                $scope.add=function () {
                    $scope.show=true;
                }
                $scope.uname="";
                $scope.uwei="";
                $scope.uhao="";
                $scope.upiao="";
                $scope.adduser=function () {
                    if( $scope.uname=="" || $scope.uwei=="" || $scope.uhao=="" || $scope.upiao=="")
                    {
                        alert("此项为必填项");
                    }
                    else
                    {
                        for(var i=0;i<$scope.data.length;i++)
                        {
                            if($scope.data[i].name==$scope.uname)
                            {
                                alert("此球员已存在");
                                $scope.uname="";
                                $scope.uwei="";
                                $scope.uhao="";
                                $scope.upiao="";
                                break;
                            }
                            else if(i==$scope.data.length-1)
                            {
                                $scope.data.push({name:$scope.uname,wei:$scope.uwei,hao:$scope.uwei,piao:$scope.upiao});
                                $scope.uname="";
                                $scope.uwei="";
                                $scope.uhao="";
                                $scope.upiao="";
                                $scope.show=false;
                                break;
                            }
                        }

                    }
                }
            })
        </script>
    </head>
    <body ng-app="myapp" ng-controller="myCtrl">
    查询:<input type="text" ng-model="name">
    排序:
    <select ng-model="order">
        <option>-请选择-</option>
        <option>票数倒叙</option>
        <option>票数正叙</option>
    </select><br>
    <button ng-click="add()" class="btn">添加球员</button>
    <table border="1px soilde #000" width="400px">
        <tr>
            <th>姓名</th>
            <th>位置</th>
            <th>球号</th>
            <th>票数</th>
        </tr>
        <tr ng-repeat="item in data|filter:search2|orderBy:'piao':pai()">
            <td>{{item.name}}</td>
            <td>{{item.wei}}</td>
            <td>{{item.hao}}</td>
            <td>{{item.piao}}</td>
        </tr>
    </table>
    <table border="1px solide #000" ng-show="show">
        <tr>
            <td>姓名:</td>
            <td><input type="text" ng-model="uname"></td>
        </tr>
        <tr>
            <td>位置:</td>
            <td><input type="text" ng-model="uwei"></td>
        </tr>
        <tr>
            <td>球号:</td>
            <td><input type="text" ng-model="uhao"></td>
        </tr>
        <tr>
            <td>票数:</td>
            <td><input type="text" ng-model="upiao"></td>
        </tr>
        <tr align="center"><td><button ng-click="adduser()">添加</button></td></tr>
    </table>
    </body>
    </html>