全选反选和批量删除
来源：互联网 发布：淘宝店铺装修页头没了 编辑：程序博客网 时间：2024/05/17 23:06
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="angular.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script>
var app=angular.module("zrApp",[]);
app.controller("my",["$scope",function($scope,$filter){
var arra=[];
$scope.aa=arra;
$scope.tj=function(){
arra.push({"name":$("#tname").val(),"pwd":$("#tpwd").val(),"age":$("#tage").val(),"sex":$("#tsex").val()});
};
$scope.Na=function(bianliang1){
$scope.Name=bianliang1;
};
$scope.Se=function(bianliang2){
$scope.Sex=bianliang2;
};
//批量删除
$("#ccdel").click(function(){
var len=$("input[name='test']:checked");
if(len.length==0){
alert("请选择");
}else{
$(len).parent().parent().remove();
}
});
//删除全部
$scope.del=function(){
$scope.aa=[];
};
//修改密码
$scope.xgmm=function(i){
$scope.aa[i].pwd="AA1235";
}]);
</script>
</head>
<body ng-app="zrApp" ng-controller="my">
姓名查找<input type="text" id="cname" ng-change="Na(bianliang1)" ng-model="bianliang1" />
年龄查找
<select id="cage" ng-change="Ae(bianliang3)" ng-model="bianliang3">
<option>0-10</option>
<option>10-20</option>
<option>20-100</option>
</select>
性别查找
<select id="csex" ng-change="Se(bianliang2)" ng-model="bianliang2">
<option>--请选择性别</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="del()">删除全部</button>
<button id="ccdel">批量删除</button>
<table border="1px solid" style="width: 300px; ">
<tr>
<th>全选<input type="checkbox" ng-model="ck"></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="a in aa |filter:{name:Name}|filter:{sex:Sex}|filter:{age:shu}" >
<td><input type="checkbox" name="test" ng-checked="ck"></td>
<td>{{$index+1}}</td>
<td>{{a.name}}</td>
<td>{{a.pwd}}</td>
<td>{{a.age}}</td>
<td>{{a.sex}}</td>
<td><button ng-click="xgmm($index)">修改密码</button></td>
</tr>
</table>
<table border="1px solid" style="width: 300px; margin: 0 auto;">
<tr>
<td>姓名</td>
<td><input type="text" placeholder="请输入姓名" id="tname"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输入密码" id="tpwd"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" placeholder="请输入年龄" id="tage"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" placeholder="请输入性别" id="tsex"/></td>
</tr>
<tr style="text-align: center;">
<td colspan="2"><button ng-click="tj()">提交</button></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="angular.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script>
var app=angular.module("zrApp",[]);
app.controller("my",["$scope",function($scope,$filter){
var arra=[];
$scope.aa=arra;
$scope.tj=function(){
arra.push({"name":$("#tname").val(),"pwd":$("#tpwd").val(),"age":$("#tage").val(),"sex":$("#tsex").val()});
};
$scope.Na=function(bianliang1){
$scope.Name=bianliang1;
};
$scope.Se=function(bianliang2){
$scope.Sex=bianliang2;
};
//批量删除
$("#ccdel").click(function(){
var len=$("input[name='test']:checked");
if(len.length==0){
alert("请选择");
}else{
$(len).parent().parent().remove();
}
});
//删除全部
$scope.del=function(){
$scope.aa=[];
};
//修改密码
$scope.xgmm=function(i){
$scope.aa[i].pwd="AA1235";
};
$("#C").click(function(){
var cks=document.getElementsByName("ck");
for(var i=0;i<cks.length;i++){
cks[i].checked=!cks[i].checked;
}
});
}]);
</script>
</head>
<body ng-app="zrApp" ng-controller="my">
姓名查找<input type="text" id="cname" ng-change="Na(bianliang1)" ng-model="bianliang1" />
年龄查找
<select id="cage" ng-change="Ae(bianliang3)" ng-model="bianliang3">
<option>0-10</option>
<option>10-20</option>
<option>20-100</option>
</select>
性别查找
<select id="csex" ng-change="Se(bianliang2)" ng-model="bianliang2">
<option>--请选择性别</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="del()">删除全部</button>
<button id="ccdel">批量删除</button>
<table border="1px solid" style="width: 300px; ">
<tr>
<th>全选<input type="checkbox" ng-model="ck"></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="a in aa |filter:{name:Name}|filter:{sex:Sex}|filter:{age:shu}" >
<td><input type="checkbox" name="test" ng-checked="ck"></td>
<td>{{$index+1}}</td>
<td>{{a.name}}</td>
<td>{{a.pwd}}</td>
<td>{{a.age}}</td>
<td>{{a.sex}}</td>
<td><button ng-click="xgmm($index)">修改密码</button></td>
</tr>
</table>
<table border="1px solid" style="width: 300px; margin: 0 auto;">
<tr>
<td>姓名</td>
<td><input type="text" placeholder="请输入姓名" id="tname"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输入密码" id="tpwd"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" placeholder="请输入年龄" id="tage"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" placeholder="请输入性别" id="tsex"/></td>
</tr>
<tr style="text-align: center;">
<td colspan="2"><button ng-click="tj()">提交</button></td>
</tr>
</table>
</body>
</html>
阅读全文
0 0
- 全选和反选及批量删除
- 全选反选和批量删除
- 全选，反选，批量删除
- 全选、反选、批量删除
- 批量删除 全选 反选
- 批量删除+单个删除+全选反选
- angularjs表格批量删除和全选反选
- 复选框全选和反选 还有批量删除
- yii框架全选反选批量删除
- 全选，反选，批量删除，全不选，即点即改
- jq全选反选批量删除
- JQuery全选，反选，批量删除
- jquery全选/反选/批量删除
- angular全选反选批量删除
- Angularjs 全选、反选、勾选删除、批量删除
- 全选，反选，搜索，分页，批量删除，删除
- AJAX全选、反选、全不选、删除、批量删除、即点即改
- 用户表的添加/删除/全选/反选/批量删除
- Java NIO原理 图文分析及代码实现
- 第四届miac安全赛第二阶段writeup
- spring jdbctemplate 实现数据库的查询操作
- 局域网远程关机程序
- 向量和矩阵范数
- 全选反选和批量删除
- 初遇CSS
- 欢迎使用CSDN-markdown编辑器
- A
- nginx include conf
- 2017年11月19日训练总结
- 计算零到二十出现的次数
- 文章标题王二强
- 第九届山东理工大学ACM网络编程擂台赛 正式赛 sdut4074博弈
