隔行变色，选中变色，鼠标变小手样式；姓名查询条件 过滤敏感字符 下拉列表排序 非空验证添加信息 点击按钮删除
来源：互联网 发布：淘宝怎么给快递差评 编辑：程序博客网 时间：2024/05/17 17:15
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用户信息：奇偶数隔行变色，选中行变色，鼠标变小手样式；姓名查询条件，过滤敏感字符；下拉列表排序；非空验证添加信息；点击按钮删除</title> <script src="../js/jquery-2.1.0.js"></script> <script src="../js/angular.js"></script> <style type="text/css"> .first{ background-color: darkgrey; } .tr_odd{ background-color: orange; } .tr_even{ background-color: aqua; } .mouse_color{ background-color: green; } #tab{ border: 1px #FF0000 solid; text-align: center; } tbody tr:nth-child(odd) { background-color: orange; } tbody tr:nth-child(even){ background-color: aqua; } </style> <script type="text/javascript"> $(function(){ //实现表格内行与行之间颜色区分 $("thead tr").addClass("first"); //设置奇数行背景色 $("#tab tr:odd").find("td").addClass("tr_odd"); //设置偶数行背景色 $("#tab tr:even").find("td").addClass("tr_even"); //鼠标移到行的颜色 $("#tab tr").mouseover(function(){ $(this).find("td").addClass("mouse_color"); }); //鼠标移出行的颜色 $("#tab tr").mouseout(function(){ $(this).find("td").removeClass("mouse_color"); }); }); </script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl",function ($scope) { $scope.users = [ {name:"张三",age:20,pin:"zhang san",zhi:"总经理"}, {name:"李四",age:18,pin:"li si",zhi:"设计师"}, {name:"王五",age:45,pin:"wang wu",zhi:"工程师"}, {name:"赵六",age:33,pin:"zhao liu",zhi:"工程师"}, {name:"周七",age:32,pin:"zhou qi",zhi:"人事经理"} ]; /* 1. 实现姓名查询条件框5分，实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”5分； 实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容”5分，当搜索内容有敏感词时，alert提示 */ //过滤敏感字符：枪 法轮功 $scope.select = function () { $(function () { var searchName = $("input:eq(0)").val(); //实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名” if(searchName == "" || searchName == null){ alert("请输入姓名"); }else { //当搜索内容有敏感词时，alert提示 if(searchName == "枪" || searchName == "法轮功"){ alert("输入内容含有敏感字符！"); $scope.searchName = ""; }else { //实现按姓名搜索表格内容功能5分，当搜索内容未找到匹配项时提示”未找到内容” var flag = false; for(index in $scope.users){ if(searchName == $scope.users[index].name){ flag = true; } } if(flag){ alert("已找到内容"); }else { alert("未找到内容！"); } } } }); } //2.实现排序下拉列表展示5分，实现按照年龄倒序排序5分，实现按照年龄正序排序 $scope.order = "age"; //3. 实现用户添加页，按要求实现内容添加5分，实现添加内容时的校验，当年龄不为数字时alert提示用户”年龄格式错误”功能5分，实现添加用户信息到列表中 $scope.show = false; $scope.add = function () { $scope.show = true; } $scope.name = ""; $scope.age = ""; $scope.pin = ""; $scope.zhi = ""; //点击添加用户信息的按钮,验证非空情况后，再添加 $scope.sub = function () { $scope.flag1 = false; $scope.flag2 = false; $scope.flag3 = false; $scope.flag4 = false; //姓名非空 if ($scope.name == null || $scope.name == ""){ alert("姓名不得为空！"); }else { $scope.flag1 = true; } //当年龄不为数字时alert提示用户”年龄格式错误”功能 if ($scope.age == "" || $scope.age == null){ alert("年龄不能为空！"); }else if (isNaN($scope.age)){ alert("年龄格式错误！"); }else { $scope.flag2 = true; } //姓名拼音 if ($scope.pin == null || $scope.pin == ""){ alert("姓名拼音不得为空！"); }else { $scope.flag3 = true; } //职位判断 if ($scope.zhi == "" || $scope.zhi == null){ alert("职位不能为空！"); }else if (isNaN($scope.zhi) == false){ alert("职位不能为数字！"); }else { $scope.flag4 = true; } //符合条件后再提交添加 if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true){ //添加成功后清空信息 var inputs = document.getElementsByTagName("input"); for(i=0;i<inputs.length;i++){ inputs.item(i).value = ""; } //设置新数据 var newUser = { name:$scope.name, age:$scope.age, pin:$scope.pin, zhi:$scope.zhi } //添加新用户 $scope.users.push(newUser); $scope.show = false; }else { return false; } } //4. 实现点击删除时弹出二次确认询问框5分，实现删除功能，删除后从列表中消失5分。注：询问框可使用js的confirm实现 $scope.remove = function (selectName) { if (confirm("您是否要将该用户从列表中删除？")) { //根据列名删除数据，首先根据所在下标遍历所有内容 for (index in $scope.users) { if($scope.users[index].name == selectName){ //使用js中的删除方法，每次删除的项目数量为1行 $scope.users.splice(index,1); } } } } }); </script></head><body ng-app="myApp" ng-controller="myCtrl"><center> <div> <h5>用户列表</h5> 姓名查询条件<input id="searchText" > <select ng-model="order"> <option value="-age">按年龄倒序</option> <option value="age">按年龄正序</option> </select> </div> <br> <table id="tab" cellspacing="0" cellpadding="20" border="1 solid black"> <thead align="left"> <tr> <th>姓名</th> <th>年龄</th> <th>拼音</th> <th>职位</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="user in users | orderBy:order"> <td pinyin="name" >{{user.name}}</td> <td pinyin="age" >{{user.age}}</td> <td pinyin="pin" >{{user.pin}}</td> <td pinyin="zhi" >{{user.zhi}}</td> <!-- 实现鼠标移动到删除上时变为小手样式--> <td><a ng-click="remove(user.name)"><div style="cursor:pointer;">删除</div></a></td> </tr> </tbody> </table> <br> <div> <button ng-click="select()">查询</button> <button ng-click="add()">添加用户</button> </div> <!-- 添加用户信息区域 --> <div ng-show="show"> <h5>添加用户信息</h5> <table cellspacing="0" cellpadding="12" border="1 solid black"> <tr> <th>姓名</th> <td><input type="text" ng-model="name" placeholder="请输入姓名"></td> </tr> <tr> <th>年龄</th> <td><input type="text" ng-model="age" placeholder="请输入年龄"></td> </tr> <tr> <th>拼音</th> <td><input type="text" ng-model="pin" placeholder="请输入拼音"></td> </tr> <tr> <th>职位</th> <td><input type="text" ng-model="zhi" placeholder="请输入职位"></td> </tr> <tr align="center"> <td colspan="2"><button ng-click="sub()" >保存</button></td> </tr> </table> </div></center></body></html>
阅读全文
0 0
- 隔行变色，选中变色，鼠标变小手样式；姓名查询条件 过滤敏感字符 下拉列表排序 非空验证添加信息 点击按钮删除
- 用户信息：奇偶数隔行变色，选中行变色，鼠标变小手样式；姓名查询条件，过滤敏感字符；下拉列表排序；非空验证添加信息；点击按钮删除
- 隔行变色，，，，按钮鼠标变小手
- 添加 隔行变色 过滤敏感词
- 模糊查询，批量删除， 添加用户，隔行变色，排序，过滤器
- 2. AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- 3：AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- 添加 表单隐藏 变小手 鼠标滑过变色
- JQurey 隔行变色,鼠标悬停/移开,CheckBox选中,页面排序
- jQuery学习07---隔行变色，光棒效果，鼠标变小手
- 1. AngularJS+路由+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息（路由显示添加页面）
- 敏感字 隔行变色
- angularjs-添加数据,姓名查询,过滤敏感字符,下拉菜单查询
- angular综合题 添加 删除 排序 隔行变色 等
- 购物车，增加，删除，模糊查询隔行变色+排序
- 内容查询Web部件样式，隔行变色。
- 【Html】鼠标移动上去变色&移动上去变小手
- HttpUrlConnection用get和post请求发送参数
- 手把手：用OpenCV亲手给小扎、Musk等科技大佬们做一张“平均脸”（附Python代码）
- Cookie/Session机制详解
- android Math的使用
- mvp+rxjava+retrofit+okhttp
- 隔行变色，选中变色，鼠标变小手样式；姓名查询条件 过滤敏感字符 下拉列表排序 非空验证添加信息 点击按钮删除
- huffman数据结构书上的
- C语言不同之处
- PullToRefresh下拉和上拉简单实现
- 在一个千万级的数据库查寻中，如何提高查询效率？
- 编译原理学习笔记 二 -- 一个简单的语法制导翻译器
- 二级购物车附加：
- 基于lamp搭建一个简单的论坛
- 横向滑动菜单, HorizontalScrollView,fragment，Viewpager结合使用
