用户信息列表 查询+年龄，性别搜索 +全部删除，批量删除+添加用户+修改密码

最新推荐文章于 2021-06-11 12:26:28 发布
最新推荐文章于 2021-06-11 12:26:28 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 4月Android hybrid跨平台开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40087072/article/details/78312806
版权 
<!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>
    <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.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.tj=function () {
                $scope.addusershow=true;
            }
            var id = 4;

            $scope.hq = function () {
                if($scope.name==null||$scope.name==""){

                    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.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;
            };

        });
        $(function () {
            $("#a").click(function () {
                $("#a").css("color","red");
                $("#aa").css("color","black");
                $("#a3").css("color","black");
                $("#a4").css("color","black");
                $("#a5").css("color","black");
            });
            $("#aa").click(function () {
                $("#a").css("color","black");
                $("#aa").css("color","red");
                $("#a3").css("color","black");
                $("#a4").css("color","black");
                $("#a5").css("color","black");
            });
            $("#a3").click(function () {
                $("#a").css("color","black");
                $("#aa").css("color","black");
                $("#a3").css("color","red");
                $("#a4").css("color","black");
                $("#a5").css("color","black");
            });
            $("#a4").click(function () {
                $("#a").css("color","black");
                $("#aa").css("color","black");
                $("#a3").css("color","black");
                $("#a4").css("color","red");
                $("#a5").css("color","black");
            });
            $("#a5").click(function () {
                $("#a").css("color","black");
                $("#aa").css("color","black");
                $("#a3").css("color","black");
                $("#a4").css("color","black");
                $("#a5").css("color","red");
            });
        });

    </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">
        年龄:<select ng-model="search2">
            <option>--请选择--</option>
            <option>22</option>
            <option>33</option>
            <option>44</option>
        </select>
        性别:<select ng-model="search3">
        <option>男</option>
        <option>女</option>
        <option>全选</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>

    </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}">
            <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="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"></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><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>
阳光鬼怪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html个人信息表制作（适合初学者）
qq_51730402的博客
12-04 4185
html个人信息表制作（适合初学者）
js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现
08-12
对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术。 js刷新、复选框全选，全不选，添加，拷贝，上下移动，删除功能实现。
只用JSP（不分层）完成用户信息的增删改查操作（2020.11.29）
weixin_622464的博客
11-29 2999
本章目录需求：（1）注册页面（2）登录页面（3）首页（显示所有用户）（4）修改页面（5）权限控制：不允许用户进行删除（6）管理员可以删除其他用户总结：源码下载： 需求： 实现账号信息（用户名、密码、年龄）的增删改查 要求有权限管理（删除、修改时控制） 自己能删除别人的账号，当删除自己的账号时自己要主动退出登录 在做个人信息修改时要求能把该人的信息全部显示出来 删除时要求提示框 6) 不要分层开发，只是用JSP技术完成。 运行结果： （1）注册页面 （2）登录页面 （3）首页（显示所有用户）
html 用户列表,用户列表.html
weixin_42404710的博客
06-11 654
用户列表$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath...
根据身份证号码更新性别 oracle SQL
轻耘智科技CTO 尤胜荣 的专栏
05-05 796
最近处理的系统中出现了大量重复数据，身份证号和姓名一样。而身份证号是作为用户登录系统的用户名，这样如果用户修改了密码，就有可能出现登录不了的情况。        参阅了相关资料后，找到一种比较方便的删除重复数据的方法，记录如下（方便以后参考）： 1delete from t_test where rowid not in2(select max(t.rowid) from t_test t ...
VB+ACCESS学生信息管理系统(论文).zip
最新发布
06-16
用户界面通过VB设计，提供各种操作功能，如添加、修改、删除和查询学生信息；业务逻辑层处理用户的操作请求，执行相应的计算和验证；数据访问层则通过ADO（ActiveX Data Objects）与Access数据库进行交互，实现数据...
java swing学生成绩管理系统（eclipse+MySQL）
06-25
1. 成绩信息管理：这是系统的核心部分，允许用户添加、删除、更新和查询学生的成绩信息。用户可以通过输入学号、姓名等关键信息来查找特定的成绩，并对其进行相应的操作。此外，系统可能还支持批量导入或导出成绩，...
(Qt+Sqlite3)学生信息管理系统.zip
09-23
5. **信息编辑模块**：修改已有学生的信息，支持批量操作。 6. **信息删除模块**：删除不再需要的学生信息，通常需要确认操作以防止误删。 7. **数据备份与恢复模块**：定期备份数据库，防止数据丢失，同时提供恢复...
java班级管理系统(论文+系统).rar
04-05
2. 班级管理：添加、修改、删除班级信息，可以进行班级成员的增删改查。 3. 学生管理：对学生信息进行录入、更新、删除，支持批量导入导出。 4. 课程管理：设置课程信息，处理课程的增删改，可以查看课程的选课情况...
xml+java学生信息管理系统
11-20
学生信息管理系统的功能通常包括添加、删除、查询和修改学生信息。通过Java Swing或JavaFX等GUI库，可以创建美观且用户友好的界面，让用户直观地操作。例如，可以设计表格展示所有学生的信息，提供按钮进行增删改查...
学生信息管理系统(实现对信息的删除，添加，修改，查询，统计等功能)
11-23
在JCREATE下开发的，图形界面，对学生信息的删除，添加，修改，查询（分精确和分类查询两种），统计等功能。对于学习GUI和SQL Server2000操作有很大参考价值，同时对于同类系统的开发也有加大参考价值
用户列表，用户修改，用户个人信息web前端.zip
10-28
用户模块管理HTML页面 ⎻ 1用户列表userlist.html ⎻ 2用户注册useradd.html ⎻ 3用户修改useredit.html ⎻ 4用户信息userinfo.html
简单HTML+CSS3设计——用户信息管理系统
热门推荐
渣渣的夏天
04-10 1万+
利用HTML+CSS3技术设计一个简单的用户信息管理系统，主要包含框架主页、我的工作台、用户注册、用户信息列表共计四个页面。 一、框架结构 二、我的工作台 三、用户注册 四、用户信息列表 源代码：https://github.com/zz2summer/StudentInfoManageSystemByHTML ...
用户信息passwd
weixin_30457465的博客
08-09 54
structpasswd { char*pw_name;/*Username,POSIX.1*/ char*pw_passwd;/*Password*/ __uid_tpw_uid;/*UserID,POSIX.1*/ __gid_tpw_gid;/*GroupID,POSIX.1*/...
微博用户发言信息列表
离开实践的理论是空洞的理论,没有理论指导的实践是盲目的实践
03-29 410
1.初学者的理解与定义：div层层嵌套。 2.中级者的理解与定义：去掉多余的div，进行简化。 3.高手的理解与定义： 最大化的简化html的结构，然后用css进行设置，减少html与css的契合度。 微博用户发言信息列表 .demo01{width:600px;position:relative;overflow:hidden;} .demo01 .left{width:100px;
MYSQL将一个人的性别改为女_力扣数据库题目627变更性别
weixin_30696755的博客
02-08 1329
力扣数据库题目627变更性别给定一个 salary 表，如下所示，有 m = 男性 和 f = 女性 的值。交换所有的 f 和 m 值(例如，将所有 f 值更改为 m，反之亦然)。要求只使用一个更新(Update)语句，并且没有中间的临时表。注意，您必只能写一个 Update 语句，请不要编写任何 Select 语句。例如：idnamesexsalary1Am25002Bf15003Cm55004...
数据基础课程第3天练习题参考答案及解析
weixin_45533230的博客
03-09 1166
参考答案及解析 1、把/etc/passwd文件的内容存储到userdb库下的user表里，并做如下配置： create database userdb default charset=utf8; create table userdb.user(name char(20) not null ,password char(1) default"X" not null,uid int(11) ,gi...
ionic各种模板
qq_40087072的博客
10-20 2353
第一个模板 三个页面点击跳转 html> html ng-app="BShop"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> link href=
PXE+kickstart批量部署操作系统的实战指南
"PXE+kickstart批量部署操作系统.pdf" PXE+kickstart批量部署操作系统是一种高效、自动化的操作系统安装方法，常用于企业级环境中快速设置大量计算机。此技术结合了PXE（预启动执行环境）和kickstart工具，能够实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值