初学Html5+CSS之表格添加用户+删除用户+修改数据+删除全部+批量删除+查询数据+内容判断
2017-11-19 20:01
926 查看
效果图
需要导入的包
代码如下
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title></title>
4000
<style>
select{
width: 100px;
}
tr{
background-color: white;
text-align: center;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
angular.module("app",[]).controller("mycontr",function($scope,$filter){
$scope.arr=[{"kai":false,"name":"王闯","pass":"111","age":25,"sex":"男"},
{"kai":false,"name":"张三","pass":"222","age":35,"sex":"女"},
{"kai":false,"name":"李四","pass":"333","age":15,"sex":"男"},
{"kai":false,"name":"王五","pass":"444","age":25,"sex":"女"},];
$scope.shuarr=$scope.arr;
$scope.name1="";
$scope.pass1="";
$scope.age1="";
$scope.sex1="";
$scope.bool=function(){
var n=$scope.name1;
var p=$scope.pass1;
var a=parseInt($scope.age1);
// alert(a);
var s=$scope.sex1;
var kai1=false;
var kai2=false;
var kai3=false;
var kai4=false;
if(n!=null&n!=""){
kai1=true;
}
if(p!=""&p!=null){
kai2=true;
}
if(a==$scope.age1){
kai3=true;
}
if(s!=""&s!=null){
kai4=true;
}
if(kai1&kai2&kai3&kai4){
return true;
}else{
return false;
}
}
$scope.tijiao=function(){
if($scope.bool()){
var user={"kai":false,"name":""+$scope.name1+"","pass":""+$scope.pass1+"","age":""+$scope.age1+"","sex":""+$scope.sex1+""};
$scope.shuarr.unshift(user);
document.getElementById("addtable").style.display="none";
}else{
alert("输入的值类型不对!")
}
$scope.name1="";
$scope.pass1="";
$scope.age1="";
$scope.sex1="";
}
$scope.showtable=function(){
document.getElementById("addtable").style.display="block";
}
$scope.qxuan=function(){
var qx=document.getElementById("qx");
// alert(qx.checked)
for (var i=0;i<$scope.shuarr.length;i++) {
$scope.shuarr[i].kai=qx.checked;
}
}
$scope.zixuan=function(i){
var qx=document.getElementById("qx");
qx.checked=false;
// alert($scope.shuarr[i].kai)
}
$scope.shanall=function(){
$scope.shuarr.splice(0,$scope.shuarr.length);
}
$scope.shanpi=function(){
var y=0;
var kg=false;
for (var i=0;i<$scope.shuarr.length;i++) {
if($scope.shuarr[i].kai){
y=i;
kg=true;
break;
}
}
if(kg){
$scope.shuarr.splice(y,1);
var qx=document.getElementById("qx");
qx.checked=false;
$scope.shanpi();
}
}
$scope.ncha="";
$scope.sxing="";
$scope.anian="";
$scope.shuarr2=[];
$scope.namecha=function(){
if($scope.anian!=""&$scope.anian!=null){
$scope.agexuan();
$scope.guolv1();
}else{
$scope.guolv();
}
// console.log("sss",$scope.f);
}
$scope.sexgai=function(){
if($scope.anian!=""&$scope.anian!=null){
$scope.agexuan();
$scope.guolv1();
}else{
$scope.guolv();
}
//// var agea=$scope.anian.split("-");
// if($scope.anian!=null&$scope.anian!=""){
// alert("选")
// }else{
// alert("为选")
// }
}
$scope.agegai=function(){
if($scope.anian!=""&$scope.anian!=null){
$scope.agexuan();
$scope.guolv1();
}
// var agea=$scope.anian.split("-");
// alert(agea[0])
// var agea=$scope.anian.split("-");
// for (var i=0;i<$scope.arr.length;i++) {
// if($scope.arr[i].age>agea[0]&$scope.arr[i].age<agea[1]){
// $scope.shuarr.push($scope.arr[i]);
// }
}
$scope.agexuan=function(){
if($scope.anian!=null&$scope.anian!=""){
var agea=$scope.anian.split("-");
$scope.shuarr2=[];
for (var i=0;i<$scope.arr.length;i++) {
if($scope.arr[i].age>agea[0]&$scope.arr[i].age<agea[1]){
$scope.shuarr2.push($scope.arr[i]);
}
}
}
}
$scope.guolv1=function(){
var $f=$filter('filter');
$scope.f=$f($scope.shuarr2,{"name":$scope.ncha,"sex":$scope.sxing});
$scope.shuarr=[];
for (var i=0;i<$scope.f.length;i++) {
$scope.shuarr.push($scope.f[i]);
}
}
$scope.guolv=function(){
var $f=$filter('filter');
$scope.f=$f($scope.arr,{"name":$scope.ncha,"sex":$scope.sxing});
$scope.shuarr=[];
for (var i=0;i<$scope.f.length;i++) {
$scope.shuarr.push($scope.f[i]);
}
}
});
</script>
</head>
<body ng-controller="mycontr">
<br />
<div style="padding-left: 50px; width: 750px;margin: auto;">
姓名查找:<input type="text" placeholder="请输入查找的姓名" ng-change="namecha()" ng-model="ncha" />
<!--<p>{{arr|filter:{"name":ncha} }}</p>-->
年龄查找:<select ng-model="anian" ng-change="agegai()">
<option style="display: none;" value="">请选择</option>
<option>10-20</option>
<option>21-30</option>
<option>31-40</option>
</select>
性别查找:<select ng-model="sxing" ng-change="sexgai()">
<option style="display: none;" value="">请选择</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="shanall()">删除全部</button>
<button ng-click="shanpi()">批量删除</button>
</div>
<br />
<table style="margin: auto;" width="700px" border="0"cellspacing="1" bgcolor="#000000">
<tr>
<th>全选<input type="checkbox" ng-click="qxuan()" id="qx"/></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>类别</th>
</tr>
<tr ng-repeat="a in shuarr">
<td><input type="checkbox" ng-model="a.kai" ng-click="zixuan($index)"/></td>
<td>{{$index}}</td>
<td>{{a.name}}</td>
<td>{{a.pass}}</td>
<td>{{a.age}}</td>
<td>{{a.sex}}</td>
<td><button>修改密码</button></td>
</tr>
</table>
<br />
<div style="width: 200px;text-align: center;margin: auto;"><button ng-click="showtable()">添加用户</button></div>
<br />
<table id="addtable" width="200px" style="margin: auto; display: none;" border="0"cellspacing="1" bgcolor="#000000">
<tr>
<td width="50px">姓名</td>
<td><input type="text" placeholder="请输入姓名" ng-model="name1"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输入密码" ng-model="pass1"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" placeholder="请输入年龄" ng-model="age1"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" placeholder="请输入性别" ng-model="sex1"/></td>
</tr>
<tr>
<td colspan="2"><button ng-click="tijiao()">提交</button></td>
</tr>
</table>
</body>
</html>
需要导入的包
代码如下
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title></title>
4000
<style>
select{
width: 100px;
}
tr{
background-color: white;
text-align: center;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
angular.module("app",[]).controller("mycontr",function($scope,$filter){
$scope.arr=[{"kai":false,"name":"王闯","pass":"111","age":25,"sex":"男"},
{"kai":false,"name":"张三","pass":"222","age":35,"sex":"女"},
{"kai":false,"name":"李四","pass":"333","age":15,"sex":"男"},
{"kai":false,"name":"王五","pass":"444","age":25,"sex":"女"},];
$scope.shuarr=$scope.arr;
$scope.name1="";
$scope.pass1="";
$scope.age1="";
$scope.sex1="";
$scope.bool=function(){
var n=$scope.name1;
var p=$scope.pass1;
var a=parseInt($scope.age1);
// alert(a);
var s=$scope.sex1;
var kai1=false;
var kai2=false;
var kai3=false;
var kai4=false;
if(n!=null&n!=""){
kai1=true;
}
if(p!=""&p!=null){
kai2=true;
}
if(a==$scope.age1){
kai3=true;
}
if(s!=""&s!=null){
kai4=true;
}
if(kai1&kai2&kai3&kai4){
return true;
}else{
return false;
}
}
$scope.tijiao=function(){
if($scope.bool()){
var user={"kai":false,"name":""+$scope.name1+"","pass":""+$scope.pass1+"","age":""+$scope.age1+"","sex":""+$scope.sex1+""};
$scope.shuarr.unshift(user);
document.getElementById("addtable").style.display="none";
}else{
alert("输入的值类型不对!")
}
$scope.name1="";
$scope.pass1="";
$scope.age1="";
$scope.sex1="";
}
$scope.showtable=function(){
document.getElementById("addtable").style.display="block";
}
$scope.qxuan=function(){
var qx=document.getElementById("qx");
// alert(qx.checked)
for (var i=0;i<$scope.shuarr.length;i++) {
$scope.shuarr[i].kai=qx.checked;
}
}
$scope.zixuan=function(i){
var qx=document.getElementById("qx");
qx.checked=false;
// alert($scope.shuarr[i].kai)
}
$scope.shanall=function(){
$scope.shuarr.splice(0,$scope.shuarr.length);
}
$scope.shanpi=function(){
var y=0;
var kg=false;
for (var i=0;i<$scope.shuarr.length;i++) {
if($scope.shuarr[i].kai){
y=i;
kg=true;
break;
}
}
if(kg){
$scope.shuarr.splice(y,1);
var qx=document.getElementById("qx");
qx.checked=false;
$scope.shanpi();
}
}
$scope.ncha="";
$scope.sxing="";
$scope.anian="";
$scope.shuarr2=[];
$scope.namecha=function(){
if($scope.anian!=""&$scope.anian!=null){
$scope.agexuan();
$scope.guolv1();
}else{
$scope.guolv();
}
// console.log("sss",$scope.f);
}
$scope.sexgai=function(){
if($scope.anian!=""&$scope.anian!=null){
$scope.agexuan();
$scope.guolv1();
}else{
$scope.guolv();
}
//// var agea=$scope.anian.split("-");
// if($scope.anian!=null&$scope.anian!=""){
// alert("选")
// }else{
// alert("为选")
// }
}
$scope.agegai=function(){
if($scope.anian!=""&$scope.anian!=null){
$scope.agexuan();
$scope.guolv1();
}
// var agea=$scope.anian.split("-");
// alert(agea[0])
// var agea=$scope.anian.split("-");
// for (var i=0;i<$scope.arr.length;i++) {
// if($scope.arr[i].age>agea[0]&$scope.arr[i].age<agea[1]){
// $scope.shuarr.push($scope.arr[i]);
// }
}
$scope.agexuan=function(){
if($scope.anian!=null&$scope.anian!=""){
var agea=$scope.anian.split("-");
$scope.shuarr2=[];
for (var i=0;i<$scope.arr.length;i++) {
if($scope.arr[i].age>agea[0]&$scope.arr[i].age<agea[1]){
$scope.shuarr2.push($scope.arr[i]);
}
}
}
}
$scope.guolv1=function(){
var $f=$filter('filter');
$scope.f=$f($scope.shuarr2,{"name":$scope.ncha,"sex":$scope.sxing});
$scope.shuarr=[];
for (var i=0;i<$scope.f.length;i++) {
$scope.shuarr.push($scope.f[i]);
}
}
$scope.guolv=function(){
var $f=$filter('filter');
$scope.f=$f($scope.arr,{"name":$scope.ncha,"sex":$scope.sxing});
$scope.shuarr=[];
for (var i=0;i<$scope.f.length;i++) {
$scope.shuarr.push($scope.f[i]);
}
}
});
</script>
</head>
<body ng-controller="mycontr">
<br />
<div style="padding-left: 50px; width: 750px;margin: auto;">
姓名查找:<input type="text" placeholder="请输入查找的姓名" ng-change="namecha()" ng-model="ncha" />
<!--<p>{{arr|filter:{"name":ncha} }}</p>-->
年龄查找:<select ng-model="anian" ng-change="agegai()">
<option style="display: none;" value="">请选择</option>
<option>10-20</option>
<option>21-30</option>
<option>31-40</option>
</select>
性别查找:<select ng-model="sxing" ng-change="sexgai()">
<option style="display: none;" value="">请选择</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="shanall()">删除全部</button>
<button ng-click="shanpi()">批量删除</button>
</div>
<br />
<table style="margin: auto;" width="700px" border="0"cellspacing="1" bgcolor="#000000">
<tr>
<th>全选<input type="checkbox" ng-click="qxuan()" id="qx"/></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>类别</th>
</tr>
<tr ng-repeat="a in shuarr">
<td><input type="checkbox" ng-model="a.kai" ng-click="zixuan($index)"/></td>
<td>{{$index}}</td>
<td>{{a.name}}</td>
<td>{{a.pass}}</td>
<td>{{a.age}}</td>
<td>{{a.sex}}</td>
<td><button>修改密码</button></td>
</tr>
</table>
<br />
<div style="width: 200px;text-align: center;margin: auto;"><button ng-click="showtable()">添加用户</button></div>
<br />
<table id="addtable" width="200px" style="margin: auto; display: none;" border="0"cellspacing="1" bgcolor="#000000">
<tr>
<td width="50px">姓名</td>
<td><input type="text" placeholder="请输入姓名" ng-model="name1"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输入密码" ng-model="pass1"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" placeholder="请输入年龄" ng-model="age1"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" placeholder="请输入性别" ng-model="sex1"/></td>
</tr>
<tr>
<td colspan="2"><button ng-click="tijiao()">提交</button></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用户表（查询数据 、添加数据 、排序 、点击删除 、修改密码 、批量删除 、全部删除）
- （angularjs） 数据的增删改查（添加用户，查询年龄，批量删除，全部删除，修改密码） 类似题
- 订单用户表2（用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据）
- 用户信息的增删改查：非空验证添加，模糊查询，修改密码，批量和全部删除
- 用户信息列表 查询+年龄，性别搜索 +全部删除，批量删除+添加用户+修改密码
- AngularJS 用户名查询、年龄查询、性别查询、全部删除、批量删除、添加用户、修改密码
- 订单用户表1（用户查询 、手机号查询 、选择城市 、选择状态、月份查询 、ID排序 、添加数据、批量发货、批量删除）
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- 用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据）
- html angular+route:模糊查询+限定年龄范围+全部删除+批量删除+修改密码+添加用户
- 使用jQuery动态创建一个表格（根据用户输入的内容添加一行数据，并且能逐行删除）
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- angular 输入添加，全选，批量删除表格数据
- AngularJS：模糊查询过滤内容，验证判断后添加表格信息
- iOS-封装FMDB框架：各用一句代码更新（添加&修改），查询，删除用户信息
- SQL Server 数据的添加修改删除和查询
- 稳扎稳打Silverlight(58) - 4.0通信之WCF RIA Services: 通过 Domain Service, 以 MVVM 模式实现数据的添加、删除、修改和查询
- 模糊查询全部删除添加用户
- C#实现对数据库中的表的查询、添加、修改、删除数据
- 1. AngularJS+路由+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息（路由显示添加页面）