筛选

来源：互联网发布：node.js w3c 编辑：程序博客网时间：2024/06/11 23:40

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0 auto;
width: 800px;
}
</style>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/angular.min.js"></script>
<script>
angular.module("myapp",[])
.controller("democ",function($scope){
//添加用户的点击事件
$scope.adduser=function(){
//下边表格显示
var tab = document.getElementById("tab");
tab.style.display="block";

}
var i=0;
$scope.list=[];
///提交按钮
$scope.tijiao=function(){
//将数据存进数组里
i++;
$scope.list.push({"id":i,"name":$scope.name,"psw":$scope.psw,"age":$scope.age,"sex":$scope.sex}) ;

}
////点击修改密码
$scope.update=function(index){
//弹出框
var aa = prompt("请输入新密码","passwore");
//将获得的信息修改
$scope.list[index].psw=aa;

}

$scope.ageTest = function (age, ageSize) {
if (ageSize != "--请选择--") {
var agess = ageSize.split("-");
var ageMin = agess[0];
var ageMax = agess[1];
if (age < ageMin || age > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}
}

});

//jQuery将输入的信息添加进表格
$(function(){
//alert(11);
//全选
$("#xuan").change(function(){

//所有多选框选中
var cks= $("input:checkbox[name='ck']");
for(var i=0; i<cks.length; i++){
cks[i].checked=true;
}

});
//批量删除
$("#pidel").click(function(){
//找到被选中多选框的数量
var count = $("input:checkbox[name='ck']:checked");
if(count.length==0){
alert("你还没有选中");
}else{
for(var i=0;i<count.length;i++){
count[i].parentNode.parentNode.remove();
}
}

});

//全部删除
$("#delall").click(function(){
//选出所有的添加进的信息所在的表格
var cks = $("input:checkbox[name='ck']");
for(var i=0; i<cks.length; i++){
cks[i].parentNode.parentNode.remove();
}
});

})

</script>
</head>
<body ng-app="myapp" ng-controller="democ" >
姓名查找<input ng-model="ming" />
年龄查找<select ng-model="ageSize" ng-init="ageSize='--请选择--'">
<option>--请选择--</option>
<option>10-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
<option>51-60</option>
</select>
性别查找<select ng-model="bie">
<option>--请选择--</option>
<option>男</option>
<option>女</option>
</select>
<input type="button" value="删除全部" id="delall"/>
<input type="button" value="批量删除" id="pidel"/>
<table border="1px solid " cellspacing="0" id="tab1" style="width: 600px;">
<tr>
<th>全选<input type="checkbox" id="xuan"/></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in list|filter:ming|filter:bie" ng-if="ageTest(item.age,ageSize)">
<td><input type="checkbox" name="ck"/></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.psw}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><input type="button" value="修改密码" ng-click="update($index)"/></td>
</tr>

</table><br />
<button ng-click="adduser()">添加用户</button>

<table cellspacing="0" id="tab" style="display: none;width: 400px;">
<tr>
<td>姓名</td>
<td><input id="name" placeholder="请输入姓名" ng-model="name"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="psw" placeholder="请输入密码" ng-model="psw"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input id="age" placeholder="请输入年龄" ng-model="age"/></td>
</tr>
<tr>
<td>性别</td>
<td><input id="sex" placeholder="请输入性别" ng-model="sex"/></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="button" value="提交" ng-click="tijiao()"/></td>
</tr>
</table>

</body>
</html>

阅读全文

0 0