2. AngularJs+JQuery：模糊查詢過濾內容，下拉選單排序，過濾敏感字元，驗證判斷後新增表格資訊
阿新 • • 發佈：2019-02-19
注：新增球員的功能無指定技術要求，新增球員的頁面也無具體樣式要求。
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>