html5_angular+jquery用户列表

来源：互联网发布：淘宝客搜索计入权重吗编辑：程序博客网时间：2024/06/06 07:34
<!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.persons = [];            //页面隐藏            $scope.h=true;            $scope.hh=true;            //点击-添加的表格弹出            $scope.tj = function(){                $scope.h=false;                $scope.hh=true;            }            //点击-修改的表格弹出            $scope.xg = function(a){                $scope.h=true;                $scope.hh=false;                $scope.yh=$scope.persons[a].yhm;                $scope.aw=a;//赋值-传过来的索引            }            $scope.tj1 = function(){                if ($scope.yhm != null&&$scope.yhm!="") {                    if($scope.mm!=null&&$scope.mm.length>=6){                        if($scope.nl>10&&$scope.nl<60){                            if($scope.xb=="男"||$scope.xb=="女"){                                $scope.persons.push({yhm:$scope.yhm,mm:$scope.mm,nl:$scope.nl,xb:$scope.xb});                                $scope.h=true;                                $scope.yhm="";                                $scope.mm="";                                $scope.nl="";                                $scope.xb="";                            }else{                                alert("性别不符");                                return;                            }                        }else{                            alert("年龄不符");                            return;                        }                    }else {                       alert("密码长度不符");                        return;                    }                }else{                    alert("用户名不能为空");                    return;                }            }            $scope.tj2 = function(){                    if($scope.persons[$scope.aw].mm==$scope.m){                        if($scope.m2!=null&&$scope.m2!=""&&$scope.m2.length>=6){                            if($scope.m2==$scope.m3){                                $scope.persons[$scope.aw].mm = $scope.m2;                                $scope.hh=true;                                $scope.yh="";                                $scope.m="";                                $scope.m2="";                                $scope.m3="";                            }else{                                alert("两次密码不一致");                                return;                            }                        }else{                            alert("长度需要大于6");                            return;                        }                    }else {                        alert("旧密码输入错误");                        return;                    }            }            //查询实现的功能            var op = $scope.persons;//获取一个新的数组            $scope.selects = function(){                    $scope.persons = [];//原先的数组清空                    for (var i in op) {//遍历新的数组                        if (op[i].yhm == $scope.name) {                            //添加一条数据                            $scope.persons.push(op[i]);                        }                    }                //如果什么都不输入,把原先的数据添加回去                if($scope.name==null||$scope.name==""){                    //原先被清空的数组=新的数组   新的数组的值是原先没有被清空之前的                    $scope.persons=op;                }            }            //全部删除            $scope.deletes = function(){                $scope.persons = [];            }            //批量删除            $scope.deletes2 = function(){                for(var i=0;i<$scope.persons.length;i++){                    $("input[name='check']").each(function () {                       if(this.checked){                           $scope.persons.splice(i,1);                       }                    });                }            }            //全选全不选            $(function(){                $("#c").click(function(){                    //获取最上面的选中状态                    var check = this.checked;                    //遍历                    $("input[name='check']").each(function () {                        this.checked = check;                    });                });            });        });    </script>    <style>        table{            margin-top: 40px;        }        .q{            text-align: center;        }        .tj{            background-color: #007aff;            width: 80px;            height: 50px;            margin-left: 900px;            margin-top: 30px;        }        .table1{            position: absolute;            left: 750px;            top: 550px;        }        .table2{            position: absolute;            left: 750px;            top: 550px;        }    </style></head><body ng-app="myapp" ng-controller="myctrl"><h1 align="center">用户信息表</h1><div align="center">    <input type="text" placeholder="用户名查询" ng-change="selects()" ng-model="name">    年龄:<select>        <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="nnv">        <option>男</option>        <option>女</option>    </select>    <button  ng-click="deletes()">全部删除</button>    <button  ng-click="deletes2()">批量删除</button></div><table border="1" align="center" width="40%" cellpadding="10" cellspacing="0">  <tr>      <th><input type="checkbox" id="c"></th>      <th>id</th>      <th>用户名</th>      <th>密码</th>      <th>年龄</th>      <th>性别</th>      <th>操作</th>  </tr>    <tr ng-repeat="person in persons | filter:{'xb':nnv}"><!-- 过滤器实现了性别查询,名称查询在上面  -->        <td class="q"><input type="checkbox" name="check"></td>        <td class="q">{{$index+1}}</td>        <td class="q">{{person.yhm}}</td>        <td class="q">{{person.mm}}</td>        <td class="q">{{person.nl}}</td>        <td class="q">{{person.xb}}</td>        <td class="q"><button ng-click="xg($index)">修改密码</button></td>    </tr></table><button class="tj" ng-click="tj()">添加用户</button><table border="1" align="center" width="20%" cellpadding="10" cellspacing="0" class="table1" ng-hide="h">    <tr>        <th>用户名:</th>        <td><input type="text" placeholder="请输入用户名" ng-model="yhm"></td>    </tr>    <tr>        <th>密　码:</th>        <td><input type="text" placeholder="请输入密码" ng-model="mm"></td>    </tr>    <tr>        <th>年　龄:</th>        <td><input type="text" placeholder="请输入年龄" ng-model="nl"></td>    </tr>    <tr>        <th>性　别:</th>        <td><input type="text" placeholder="请输入性别" ng-model="xb"></td>    </tr>       <tr> <td colspan="2" align="center"><input type="button" value="提交" ng-click="tj1()"> </td> </tr></table><table border="1" align="center" width="20%" cellpadding="10" cellspacing="0" class="table2" ng-hide="hh">    <tr>        <th>用户名:</th>        <td><input type="text" ng-model="yh"  disabled></td>    </tr>    <tr>        <th>旧密码:</th>        <td><input type="text" placeholder="请输入旧密码" ng-model="m"></td>    </tr>    <tr>        <th>新密码:</th>        <td><input type="text" placeholder="请输入新密码" ng-model="m2"></td>    </tr>    <tr>        <th>确　认:</th>        <td><input type="text" placeholder="请确认密码" ng-model="m3"></td>    </tr>    <tr> <td colspan="2" align="center"><input type="button" value="提交" ng-click="tj2()"> </td> </tr></table></body></html>
阅读全文
0 0