aj球员查询和添加

来源：互联网发布：ubuntu源无法使用编辑：程序博客网时间：2024/04/28 03:03
<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <script type="text/javascript" src="angular-1.3.0.js"></script>  <script type="text/javascript" src="jquery.1.12.4.js"></script>  <script>    var app=angular.module("myapp",[]);    app.controller("myCtrl",function($scope){      $scope.h=false;//显示和隐藏添加列表      $scope.persons=[];//存放添加的内容      $scope.xz=function(){//新增球员的点击事件点击列表出现        $scope.h=true;      }      $scope.tj = function(){        for(var i=0;i<$scope.persons.length;i++){//遍历列表的所有数据          if($scope.name==$scope.persons[i].name) {//对比数据没有重复的姓名出现            alert("您记录的内容已存在");            return;          }        }        //判断不能为空        if($scope.name!=""&&$scope.name!=null){          if($scope.wz!=""&&$scope.wz!=null){            if($scope.hao!=""&&$scope.hao!=null){              if($scope.number!=""&&$scope.number!=null){                $scope.persons.push({//添加                  name:$scope.name,                  wz:$scope.wz,                  hao:$scope.hao,                  number:$scope.number});                $scope.name="";                $scope.wz="";                $scope.hao="";                $scope.number="";                $scope.h=false;//添加成功添加表格关闭              }else{                alert("票數不能為空");              }            }else{              alert("球号不能为空");            }          }else{            alert("位置不能为空");          }        }else{          alert("姓名不能为空");        }      }    });  </script>  <!--//css样式-->  <style>    .input{      width: 300px;      height: 30px;    }    .select{      width: 300px;      height: 35px;    }    .button{      background-color: deepskyblue;      width: 100px;      height: 60px;      border-radius: 5%;      margin-top: 30px;    }    .table{      margin-top: 30px;    }    .table tr:nth-child(even){      background-color: #eeeeee;    }    .table2{      position: absolute;      left: 300px;      top: 650px;    }    .q{      text-align: center;    }  </style></head><body ng-app="myapp" ng-controller="myCtrl"><div>  查询<br>  <input type="text" class="input" ng-model="names"></div><!--//排序--><div style="position: absolute;top: 10px;left: 500px">  排序<br>  <select class="select" ng-model="b">    <option value="">票数正序</option>    <option value="-">票数倒序</option>  </select></div><!--新增球员按钮--><button class="button" ng-click="xz()">新增球员</button><table border="1" width="60%" cellspacing="0" cellpadding="10" class="table">  <tr style="background-color: #999">    <th>姓名</th>    <th>位置</th>    <th>球号</th>    <th>票数</th>  </tr><!--展示界面-->  <tr ng-repeat="person in persons | filter:{'name':names} | orderBy:b+'number'">    <td class="q">{{person.name}}</td>    <td class="q">{{person.wz}}</td>    <td class="q">{{person.hao}}</td>    <td class="q">{{person.number}}</td>  </tr></table><!--添加的表单--><table border="1" cellspacing="0" cellpadding="10" class="table2" ng-show="h">  <tr>    <td>姓名</td>    <td><input type="text" placeholder="请输入姓名" ng-model="name"></td>  </tr>  <tr>    <td>位置</td>    <td><input type="text" placeholder="请输入位置" ng-model="wz"></td>  </tr>  <tr>    <td>球号</td>    <td><input type="text" placeholder="请输入球号" ng-model="hao"></td>  </tr>  <tr>    <td>票数</td>    <td><input type="text" placeholder="请输入票数" ng-model="number"></td>  </tr>  <tr>    <td colspan="2" align="center"><input type="button" value="提交" ng-click="tj()"></td>  </tr></table></body></html>
阅读全文
0 0