2. AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
来源：互联网 发布：java调用方法格式 编辑：程序博客网 时间：2024/05/25 20:01
注：添加球员的功能无指定技术要求，添加球员的页面也无具体样式要求。
1.实现上图页面所有元素，页面布局规整，跟上图效果一致
2.实现文案显示，按效果显示
3.实现查询，实现查询敏感词过滤，实现查询后列表变化
4.实现倒序，实现正序，下拉列表排序效果都实现
5.按钮背景一致，按钮样式
6.实现添加球员页面，添加球员页面样式，添加球员功能，添加球员必填项判断，添加完球员后能显示在表格内，已存在球员判重。
7.表格样式跟上图样式一致
代码：
<!DOCTYPE html><html lang="en"><head> <style type="text/css"> /* tr:nth-child(even) 当前行的第 偶数 个元素 */ /* tr:nth-child(odd) 当前行的第 奇数 个元素 */ tbody tr:nth-child(odd) { background-color: #DCDCDC; } tbody tr:nth-child(even){ background-color: #FFFFFF; } div{ font-size: 10px; } #input{ width: 250px; } select{ width: 250px; } #th{ text-align: left; background-color: #999999; } #add{ width: 120px; height: 30px; border: 1px solid black ; background-color: #33CCFF; } </style> <meta charset="UTF-8"> <title>AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息</title> <script src="../jquery-2.1.0.js"></script> <script src="../angular-1.5.5/angular.js"></script> <script type="text/javascript"> $(function(){ //设置 tbody主题内容 奇数行背景色 $("tbody tr:odd").addClass("tr_odd"); //设置 tbody主题内容 偶数行背景色 $("tbody tr:even").addClass("tr_even"); }); </script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl",function ($scope) { // 1. 定义球员数据，进行页面的操作 $scope.balls = [ { "name": "张三", "where": "控球后卫", "number": 11, "piao": 999 }, { "name": "李四", "where": "大前锋", "number": 21, "piao": 888 }, { "name": "王五", "where": "小前锋", "number": 23, "piao": 777 }, { "name": "赵六", "where": "中锋", "number": 10, "piao": 666 }, { "name": "周七", "where": "得分后卫", "number": 1, "piao": 555 }, ]; //定义根据票数排序的默认倒序标识符 $scope.order = "-piao"; //过滤敏感字符：枪 法轮功 $scope.search = ""; $scope.search2 = ""; //$watch():监测这个数据的值是否发生变化 $scope.$watch("search",function (value) { if(value.indexOf("枪") != -1 || value.indexOf("法轮功") != -1){ alert("输入内容含有敏感字符！"); $scope.search = ""; //有敏感字符就弹出提示，之后变量search赋值为空，内容不查询 }else { $scope.search2 = $scope.search; } }); // 2 .定义添加用户界面 //定义 添加球员 按钮的页面跳转方法：给按钮添加点击事件，使用AngularJS指令 ng-show ：点击按钮时显示添加页面，添加完后再隐藏页面 $scope.show = false; $scope.add = function () { $scope.show = true; } $scope.name = ""; $scope.where = ""; $scope.number = ""; $scope.piao = ""; //点击添加球员信息的按钮,验证非空情况后，再添加 $scope.sub = function () { $scope.flag1 = false; $scope.flag2 = false; $scope.flag3 = false; $scope.flag4 = false; $scope.flag5 = false; $scope.flag6 = false; //a)姓名非空 if ($scope.name == null || $scope.name == ""){ alert("姓名不得为空！"); }else { var flag = true; //遍历对象数据姓名，有重复name就弹出提示，不添加，否则添加 for(index in $scope.balls){ if($scope.balls[index].name == $scope.name){ alert("球员添加重复！请重新填写数据"); flag = false; $scope.flag1 = false; } } if(flag){ $scope.flag1 = true; } } //b)位置长度 if ($scope.where == null || $scope.where == ""){ alert("位置不能为空！"); }else { $scope.flag2 = true; } //c)球号在1到60之间 if ($scope.number == "" || $scope.number == null){ alert("球号不能为空！"); }else if ($scope.number < 0 || $scope.number > 60 || $scope.number == 0 ){ alert("球号必须在1到60之间！"); }else { $scope.flag3 = true; } //判断球号是否包含字母（汉字） //定义正则表达式 var reg = /\D/; if(reg.test($scope.number)) { alert("球号不能含字母！"); }else { $scope.flag4 = true; } //票数非空 if ($scope.piao == null || $scope.piao == ""){ alert("票数不得为空！"); }else { $scope.flag5 = true; } //判断票数是否包含字母（汉字） //定义正则表达式 var reg = /\D/; if(reg.test($scope.piao)) { alert("票数不能含字母！"); }else { $scope.flag6 = true; } //符合条件后再提交添加 if($scope.flag1 == true && $scope.flag2 == true && $scope.flag3 == true && $scope.flag4 == true && $scope.flag5 == true && $scope.flag6 == true){ //添加成功后清空信息 var inputs = document.getElementsByTagName("input"); for(i=0;i<inputs.length;i++){ inputs.item(i).value = ""; } //number,piao变量 需转为number类型 var newBall = { name:$scope.name, where:$scope.where, number:parseInt($scope.number), piao:parseInt($scope.piao) } //添加新用户 $scope.balls.push(newBall); $scope.show = false; }else { return false; } } }); </script></head><body ng-app="myApp" ng-controller="myCtrl"> <center> <div> <div> <span style="float:left;margin-left: 156px;">查询</span> <span style="float:right;margin-right:388px;">排序</span> </div> <br> <div> <input ng-model="search" placeholder="请输入球员信息" id="input" /> <!-- order 绑定的值由value值决定，piao，number表示正序，-piao，-number表示倒序 --> <select ng-model="order"> <option value="-piao">票数倒序</option> <option value="piao">票数正序</option> <option value="-number">球号倒序</option> <option value="number">球号正序</option> </select> </div> </div> <br> <button id="add" ng-click="add()">新增球员</button> <br> <br> <table border="1" cellpadding="1" cellspacing="0" width="888"> <thead> <tr id="th"> <th>姓名</th> <th>位置</th> <th>球号</th> <th>票数</th> </tr> </thead> <tbody> <!-- 用ng-repaet指令将对象遍历并渲染到页面中 --> <!-- filter指令实现模糊查询输入内容的功能。用户在输入框中键入信息的时候列表会动态显示符合要求的查询信息 --> <!-- orderBy指令根据select标签下拉菜单中绑定的数据：ng-model="piaoTest" order的值进行正/倒序排序 --> <tr ng-repeat="ballUser in balls | filter:search | orderBy:order "> <td>{{ballUser.name}}</td> <td>{{ballUser.where}}</td> <td>{{ballUser.number}}</td> <td>{{ballUser.piao}}</td> </tr> </tbody> </table> <br> <br> <!-- 新增球员页面 --> <table border="1" cellspacing="0" cellpadding="18" ng-show="show"> <tr> <th>姓名：</th> <td><input ng-model="name" placeholder="请输入姓名"/></td> </tr> <tr> <th>位置：</th> <td><input ng-model="where" placeholder="请输入位置"/></td> </tr> <tr> <th>球号：</th> <td><input ng-model="number" placeholder="请输入球号"/></td> </tr> <tr> <th>票数：</th> <td><input ng-model="piao" placeholder="请输入票数"/></td> </tr> <tr align="center"> <td colspan="2"><button ng-click="sub()" style="border: 1px solid black ; background-color: #33CCFF;">添加</button></td> </tr> </table> </center></body></html>
阅读全文
0 0
- 2. AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- 3：AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- 1. AngularJS+路由+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息（路由显示添加页面）
- AngularJS：模糊查询过滤内容，验证判断后添加表格信息
- angularjs-添加数据,姓名查询,过滤敏感字符,下拉菜单查询
- AngularJS敏感词过滤,下拉菜单排序,表格隔行换色,添加数据
- AngularJS实现下拉框排序/添加数据/查询数据/敏感字符过滤
- angularJS实现查询/选择排序/添加/敏感字符过滤
- 隔行变色，选中变色，鼠标变小手样式；姓名查询条件 过滤敏感字符 下拉列表排序 非空验证添加信息 点击按钮删除
- 查询+下拉菜单排序+增加+敏感词过滤+判断姓名是否存在
- angularjs过滤敏感字符
- angularjs过滤敏感字符
- angularjs查询删除 过滤敏感信息
- 用户信息：奇偶数隔行变色，选中行变色，鼠标变小手样式；姓名查询条件，过滤敏感字符；下拉列表排序；非空验证添加信息；点击按钮删除
- 添加用户+非空判断+整数判断+敏感字符过滤+排序+奇数行变颜色
- html angular+route:模糊查询+下拉排序+新增内容+判断是否重复+输入敏感字提示
- JQuery表格内容过滤
- Custom Gradients in TensorFlow
- angular的mvc模式($scope)
- 通过配置文件完成一个简单的英汉转换
- 分隔符在末尾的split情况
- 日期选择器date、week、time、datetime、datetime-local类型
- 2. AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- 51nod 1396还是01串(前缀和)
- 解决AJAX发送PUT和DELETE请求，后台无法接收到参数
- 类加载机制
- javascript的用处
- 压岁钱
- 【软测】Bug基础知识
- 2017.10.23
- 【bzoj1951】【古代猪文】Lucas定理+欧拉定理+孙子定理
