添加查询

来源：互联网发布：html设计软件编辑：程序博客网时间：2024/06/07 20:06
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <title>用户信息表</title>    <style>        #bod{            width: 900px;            margin: 0 auto;        }        #numbl1{            margin: 0 auto;        }        #numbl1 div{            float: left;        }    </style>    <script type="text/javascript">        var app=angular.module("myApp",[]);        app.controller("myCtrl",function($scope){            $scope.user=[                {id:1,                    name:"张三",                    passWord:123,                    old:"22",                    sex:"男",                    check:false},                {id:2,                    name:"李四",                    passWord:234,                    old:"33",                    sex:"女",                    check:false},                {id:3,                    name:"王五",                    passWord:123,                    old:"22",                    sex:"男",                    check:false}            ]            var id=3;            $scope.add=function(){               if($scope.name1!=null&&$scope.name1!=""&&$scope.name1!=undefined&&$scope.pass!=null&&$scope.pass!=""&&$scope.pass!=undefined&&$scope.age!=null&&$scope.age!=""&&$scope.age!=undefined&&$scope.sex1!=null&&$scope.sex1!=""&&$scope.sex1!=undefined){                   $scope.user.push({                       id:++id,                       name:$scope.name1,                       passWord:$scope.pass,                       old:$scope.age,                       sex:$scope.sex1,                       check:false                   })                   $scope.name1="";                   $scope.pass="";                   $scope.age="";                   $scope.sex1="";                   $scope.addUserIsShow=false;               }else{                   alert("所填项不能为空！");               }            };            $scope.editUserhehe=function(){                if($scope.oldpass!=null&&$scope.oldpass!=""&&$scope.oldpass!=undefined&&$scope.newpass!=null&&$scope.newpass!=""&&$scope.newpass!=undefined&&$scope.ispass!=null&&$scope.ispass!=""&&$scope.ispass!=undefined) {                    if($scope.oldpass==$scope.user[$scope.index].passWord){                        if($scope.newpass==$scope.ispass){                            $scope.user[$scope.index].passWord=$scope.ispass;                        }else{                            alert("两次密码输入不一致！")                        }                    }else{                        alert("密码输入错误");                    }                }else{                    alert("所填项不能为空！")                }            }            var old_user=$scope.user;            $scope.gaibian=function(){                $scope.user=[];                for(var i in old_user){                    if(old_user[i].name==$scope.n_name){                        $scope.user.push(old_user[i]);                    }                    if($scope.n_name==null||$scope.n_name==""||$scope.n_name==undefined){                        $scope.user.push(old_user[i]);                    }                }            }            $scope.addUser=function(){                $scope.addUserIsShow=true;            }            $scope.editUser=function(index){                $scope.editUserIsShow=true;                $scope.index=index;                $scope.name2= $scope.user[index].name;            }        })    </script></head><body ng-app="myApp"><div id="bod" ng-controller="myCtrl"><h2 style="margin: 10px auto 0 auto;width: 150px">用户信息表</h2><div id="numbl1">    <div><input type="text" ng-model="n_name" ng-change="gaibian()" placeholder="用户名查询">&nbsp;</div>    <div>        年龄: <select>        <option>--请选择--</option>        <option>10</option>        <option>20</option>        <option>30</option>        <option>40</option>        <option>50</option>        <option>60</option>    </select>&nbsp;</div>   <div> 性别:    <select>        <option>男</option>        <option>女</option>    </select>&nbsp;</div>    <button id="allDelete">全部删除&nbsp;</button><button id="selectDelete">批量删除</button>    <div style="clear: both"></div></div>    <table border="1px" style="width: 700px;margin: 0 auto" align="center">        <tr>            <td><input type="checkbox" ng-model="allcheck" ng-click="checkall()"></td>            <td>ID</td>            <td>用户名</td>            <td>密码</td>            <td>年龄</td>            <td>性别</td>            <td>操作</td>        </tr>        <tr ng-repeat="u in user" ng-show="isShow($index)">            <td><input type="checkbox" ng-model="allcheck" ng-click="checkall()"></td>            <td>{{u.id}}</td>            <td>{{u.name}}</td>            <td>{{u.passWord}}</td>            <td>{{u.old}}</td>            <td>{{u.sex}}</td>            <td><button ng-click="editUser($index)">修改密码</button></td>        </tr>    </table>    <div style="margin-left: 40%"><button ng-click="addUser()">添加用户</button></div>    <div ng-show="addUserIsShow" style="margin-left: 25%">        <table>            <tr>                <td>用户名</td>                <td><input type="text" ng-model="name1"></td>            </tr>            <tr>                <td>密码</td>                <td><input type="text" ng-model="pass"></td>            </tr>            <tr>                <td>年龄</td>                <td><input type="text" ng-model="age"></td>            </tr>            <tr>                <td>性别</td>                <td><input type="text" ng-model="sex1"></td>            </tr>            <tr>                <td colspan="2" align="center"><button ng-click="add()">提交</button></td>            </tr>        </table>    </div>    <div ng-show="editUserIsShow" style="margin-left: 25%">        <table>            <tr>                <td>用户名</td>                <td><input type="text" ng-model="name2" disabled></td>            </tr>            <tr>                <td>旧密码</td>                <td><input type="text" ng-model="oldpass"></td>            </tr>            <tr>                <td>新密码</td>                <td><input type="text" ng-model="newpass"></td>            </tr>            <tr>                <td>确认密码</td>                <td><input type="text" ng-model="ispass"></td>            </tr>            <tr>                <td colspan="2" align="center"><button ng-click="editUserhehe()">提交</button></td>            </tr>        </table>    </div></div></body></html>
阅读全文
0 0