用户列表完整版

来源：互联网发布：高校邦网络课程登录编辑：程序博客网时间：2024/05/29 10:26
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="angular-1.3.0.js"></script>    <script src="jquery-1.11.0.js"></script>    <style type="text/css">/*改变表格条目的颜色*/    .even {        background-color: #fff ;    }    .odd {        background-color:gainsboro;    }    .aaa{        border: 1px solid red;    }   .errTips {        width: 226px;        background-color: lightpink;        color: darkred;        border-radius: 4px;        margin-left: 96px;        margin-top: 6px;        margin-bottom: 4px;        padding: 16px 48px;    }    </style>    <script>        var myapp= angular.module("myapp",[]);        var data=[            {                done:false,                id:"1",                name:"张三",                pwd:123,                year:22,                sex:"男",            },            {                done:false,                id:"2",                name:"李四",                pwd:"456",                year:33,                sex:"女",            },            {                done:false,                id:"3",                name:"王五",                pwd:"789",                year:44,                sex:"男",            }        ]        myapp.controller("myctrl",function ($scope) {            $scope.data=data;            $scope.col="id";            $scope.desc=0;            //单个删除信息            $scope.del=(function (hh) {                var con=confirm("确定删除吗?");                if(con==true){                    for(var i=0;i<$scope.data.length;i++){                        if($scope.data[i].name==hh)                        {                            $scope.data.splice(i,1);                        }                    }                }            });            /*批量删除*/            $scope.delall=function () {                var con=confirm("确定删除么?");                if(con==true){                    for(var i=0;i<$scope.data.length;i++)                    {                        if($scope.data[i].done==true)                        {                            $scope.data.splice(i,1);                            i--;                        }                    }                }else{                }            }            /*全选框*/            $scope.checkAll=function () {                for(var i=0;i<$scope.data.length;i++)                {                    if($scope.chec==true)                    {                        $scope.data[i].done=true;                    }                    else{                        $scope.data[i].done=false;                    }                }            }           //全部删除            $scope.dels=function () {                var con=confirm("确定删除么?");                $scope.data=[];            }                        //清空购物车            $scope.qk = function(){                if(confirm("您确定要清空购物车吗?")){                    $scope.data=[];                }            }            $scope.tj=function () {                $scope.addusershow=true;            }            var id = 4;            $scope.hq = function () {                if($scope.name=="习近平") {//判断输入的姓名是否包含了敏感字符                    $scope.data.push({                        id: id++,                        name: "###",                        pwd: $scope.pwd,                        year: $scope.year,                        sex: $scope.sex                    });                }                    $scope.name = "";                    $scope.pwd = "";                    $scope.year = "";                    $scope.sex = "";                    $scope.addusershow = false;                $scope.nameClass="";                for(var i=0;i<$scope.data.length;i++) {//判断与表格中数据是否重复                    if ($scope.name == $scope.data[i].name) {//写的没错，但是忘调用了数组的参数                        alert("名称不可重复！");                        return;                    }                }                if($scope.name==null||$scope.name==""){                    $scope.nameClass="aaa";                    alert("用户名不可为空！");                }                else if($scope.year<10||$scope.year>60){                    alert("年龄在10到60之间！");                }                else {                    $scope.data.push({                        id: id++,                        name: $scope.name,                        pwd: $scope.pwd,                        year: $scope.year,                        sex: $scope.sex                    });                    $scope.name = "";                    $scope.pwd = "";                    $scope.year = "";                    $scope.sex = "";                    $scope.addusershow = false;                }                };            $scope.searchge = function () {//查询过程中输出敏感字符进行提示                if ($scope.search== "习近平") {                    alert("敏感词");                    return;                }            }            $scope.editUser = function (index) {                var user = $scope.data[index];                $scope.e_name = user.name;                $scope.e_old_password = "";                $scope.e_password = "";                $scope.e_repassword = "";                $scope.editUserIsShow = true;                $scope.index = index;            };            $scope.edit = function () {                if ($scope.e_password != $scope.e_repassword) {                    alert("两次密码不一致！");                    return;                }                $scope.data[$scope.index].pwd = $scope.e_password;                $scope.editUserIsShow = false;            };        });    </script></head><body ng-app="myapp" ng-controller="myctrl"><div>    <h2 style="margin-left: 600px">用户信息表</h2>    <hr>    <div style="background-color: #E8FBFF;height:25px">        <input type="text" value="" placeholder="用户名查询" ng-model="search" ng-change="searchge()">        年龄:<select ng-model="search2">        <option >--请选择--</option>        <option >22</option>        <option >33</option>        <option >44</option>    </select>        性别:<select ng-model="search3">        <option>男</option>        <option >女</option>    </select>        排序:<select ng-model="search4" >            <option value="">请选择</option>            <option value="-">年龄倒序</option><!--这里的value值给减号是为了分辨下拉框要做的具体操作，减号就是倒序去执行，-->            <option value="">年龄正序</option><!--这个什么都不写就是默认是正序-->        </select>        <button type="button" style="color:#c3c3c3;background-color:red " ng-click="dels()">全部删除</button>        <button type="button" style="color:#c3c3c3;background-color:red " ng-click="delall()">批量删除</button>        <button type="button" style="color:#c3c3c3;background-color:red " ng-click="qk()">清空列表</button>    </div></div><div>    <table  border="1" bordercolor="#c3c3c3" width="500" cellpadding="0" cellspacing="0" style="width:1350px;text-align: center">        <tr>            <td><input type="checkbox" ng-click="checkAll()" ng-model="chec"></td>            <td>id</td>            <td>用户名</td>            <td>密码</td>            <td>年龄</td>            <td>性别</td>            <td>操作</td>        </tr >        <tr ng-repeat="item in data|filter:{'name':search}|filter:{'year':search2}|filter:{'sex':search3}|orderBy:search4+'year'" ng-class="{'even':!$even,'odd':!$odd}">            <td><input type="checkbox" ng-model="item.done"></td>            <td>{{item.id}}</td>            <td>{{item.name}}</td>            <td>{{item.pwd}}</td>            <td>{{item.year}}</td>            <td>{{item.sex}}</td>            <td>                <button style="color: #E8FBFF;background-color: yellow"ng-click="del(item.name)" >删除</button>            </td>            <td>                <button style="color: #E8FBFF;background-color: yellow"ng-click="editUser($index)" >修改密码</button>            </td>        </tr>    </table>    <br>    <div style="margin-left: 600px">        <Button style="background-color: #0c60ee" ng-click="tj()" >添加用户</Button>    </div></div><br><br><div style="margin-left: 500px" ng-show="addusershow" >    <table border="1" bordercolor="#c3c3c3" width="500" cellpadding="0" cellspacing="0" style="width:500px;text-align: center" >        <tr>            <td>用户名:<input type="text" placeholder="请输入用户名" ng-model="name" ng-class="nameClass"></td>        </tr>        <tr>            <td>密码:<input type="text" placeholder="请输入密码"ng-model="pwd"></td>        </tr>        <tr>            <td>年龄:<input type="text" placeholder="请输入年龄"ng-model="year"></td>        </tr>        <tr>            <td>性别:<input type="text" placeholder="请输入性别"ng-model="sex"></td>        </tr>       <tr>           <td>        <div class="errTips">            <ul>                <li>密码不能为空！</li>                <li>密码长度不能小于6个字符！</li>                <li>两次密码输入不一致！</li>            </ul>        </div>           </td>       </tr>        <tr>            <td><input type="button" value="提交" ng-click="hq()"></td>        </tr>    </table></div><div ng-show="editUserIsShow">    <table border="1">        <tr>            <td>                用户名：            </td>            <td>                <input type="text" ng-model="e_name" disabled/>            </td>        </tr>        <tr>            <td>                旧密码：            </td>            <td>                <input type="text" ng-model="e_old_password"/>            </td>        </tr>        <tr>            <td>                新密码：            </td>            <td>                <input type="text" ng-model="e_password"/>            </td>        </tr>        <tr>            <td>                确认密码：            </td>            <td>                <input type="text" ng-model="e_repassword"/>            </td>        </tr>        <tr>            <td colspan="2" align="center">                <input type="hidden" ng-model="index"/>                <button ng-click="edit()">提交</button>            </td>        </tr>    </table></div></body></html>
阅读全文
0 0