<!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>
文章标题 球员表格(增 查 排序)
最新推荐文章于 2024-09-10 05:23:40 发布