jQuery表格模糊搜尋
阿新 • • 發佈：2020-09-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>搜尋功能</title> <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css"> <style> .content1 { width: 600px; height: 600px; display: inline-block; margin-top: 50px; margin-left: 100px; } .content2 { width: 600px; height: 600px; display: inline-block; margin-top: 50px; margin-left: 100px; } #lin{ margin: 20px 0; height: 30px; padding: 5px; box-sizing: border-box; } .names { width: 300px; margin-bottom: 30px; } </style> </head> <body> <div class="content1"> <!-- <input type="text" id="lin" placeholder="請輸入需要搜尋的內容">--> <input type="text" class="form-control names" id="lin" placeholder="請輸入需要搜尋的內容"> <table class="table table-striped table-bordered" id="table-1"> <thead class="thead-dark"> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>電話</th> <th>地址</th> </tr> </thead> <tbody> <tr> <td>林兵</td> <td>男</td> <td>18</td> <td>12345678941</td> <td>富順</td> </tr> <tr> <td>賴玉英</td> <td>女</td> <td>18</td> <td>12345678942</td> <td>南充</td> </tr> <tr> <td>潘旭</td> <td>女</td> <td>20</td> <td>12345678912</td> <td>富順</td> </tr> <tr> <td>王威平</td> <td>男</td> <td>20</td> <td>97543152146</td> <td>廣元</td> </tr> <tr> <td>李丹</td> <td>女</td> <td>30</td> <td>14725836910</td> <td>江安</td> </tr> <tr> <td>陳志樑</td> <td>男</td> <td>20</td> <td>31546287451</td> <td>富順</td> </tr> <tr> <td>郭仕巨集</td> <td>男</td> <td>20</td> <td>51240316845</td> <td>南充</td> </tr> </tbody> </table> </div> <div class="content2"> <select class="form-control names" id="select"> <option>請選擇地址</option> <option>富順</option> <option>南充</option> <option>廣元</option> <option>江安</option> <option>成都</option> <option>內江</option> </select> <table class="table table-striped table-bordered" id="table-2"> <thead class="thead-dark"> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>電話</th> <th>地址</th> </tr> </thead> <tbody> <tr> <td>林兵</td> <td>男</td> <td>18</td> <td>12345678941</td> <td>富順</td> </tr> <tr> <td>賴玉英</td> <td>女</td> <td>18</td> <td>12345678942</td> <td>南充</td> </tr> <tr> <td>潘旭</td> <td>女</td> <td>20</td> <td>12345678912</td> <td>富順</td> </tr> <tr> <td>王威平</td> <td>男</td> <td>20</td> <td>97543152146</td> <td>廣元</td> </tr> <tr> <td>李丹</td> <td>女</td> <td>30</td> <td>14725836910</td> <td>江安</td> </tr> <tr> <td>陳志樑</td> <td>男</td> <td>20</td> <td>31546287451</td> <td>富順</td> </tr> <tr> <td>郭仕巨集</td> <td>男</td> <td>20</td> <td>51240316845</td> <td>南充</td> </tr> </tbody> </table> </div> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script> <!-- <script src="lin_search.js"></script> --> <script> function Search(objId, inputId, color) { /* 方法說明 此方法依賴於 jquery 開發的，必須先匯入 jquery 下拉框篩選時預設以第一個 option 的值 代表所有，即當選擇第一個 option 時，返回所有資料，不進行搜尋 *@param{String} objId 需要被搜尋內容表格的id或class *@param{String} inputId 搜尋框的id或class || 下拉框的id或class *@param{String} color 搜尋內容以什麼顏色返回，不傳預設為紅色 */ // 表格搜尋 this.tableSearch = function () { $('#content-null').remove(); // 每次進入先移出掉上次搜尋產生的tr this.objId.find('tr span').css({// 每次搜尋開始，先把所有字型顏色恢復初始狀態 'color': "black", 'font-weight': 'normal' }); var tableTrTdContent = this.objId.find('tr td:contains("' + this.inpIdContents + '")'); // 獲取所有含有搜尋內容的td，類似於集合儲存 if (this.inpIdContents != '') { // 如果搜尋內容為空，就不用去更改樣式，直接還原所有 if (tableTrTdContent.length == 0) {// 判斷集合長度是否為0，為0則表示搜尋的內容在表格裡不存在 this.objId.find('tr:not(:eq(0))').css({ // 先將所有tr隱藏 display: "none" }) var tableColspanNumber = this.objId.find('tr').eq(0).find('th').length || this.objId.find('tr').eq(0).find('td').length; // 獲取表頭的列數 var tr = $(` <tr id="content-null"> <td colspan='${tableColspanNumber}' style="text-align: center;">暫無你搜索的內容</td> </tr> `); // 建立搜尋不到時，顯示的tr this.objId.append(tr) } else if (tableTrTdContent.length > 0) {// 集合長度不為0，則表示搜尋的內容在表格裡 // console.log("我在") // console.log(tableTrTdContent) $('#content-null').remove(); this.objId.find('tr:not(:eq(0))').css({ // 先將所有tr隱藏 display: "none" }) for (var a = 0; a < tableTrTdContent.length; a++) {// 遍歷找到的td集合，進行每個渲染顏色 // console.log(tableTrTdContent[a].parentNode) tableTrTdContent[a].parentNode.style.display = "table-row"; // 讓含有搜尋內容的 tr 進行顯示 var contents = tableTrTdContent.eq(a).text(); // 獲取到含有搜尋內容的td裡的集體內容，即字串 var contentsArr = contents.split(this.inpIdContents); // 以搜尋框中的內容將td的值進行分割成陣列 var contentArrFirst = contentsArr[0]; // 將數組裡的第一個值取出 for (var j = 1; j < contentsArr.length; j++) {// 將分割出來的內容進行染色後重新組合在一起 contentArrFirst += `<span style=';color:${this.color};font-weight:bolder'>` + this.inpIdContents + "</span>" + contentsArr[j]; }; tableTrTdContent.eq(a).html(contentArrFirst); // 將td裡的值從新解析成html console.log(tableTrTdContent.length - 1) } } } else { this.objId.find('tr:not(:eq(0))').css({ display: "table-row" }); $('#content-null').remove(); } } // 初始化，判斷需要搜尋標籤的型別 this.init = function () { this.color = color || 'red'; console.log(this.color) if (typeof $ == "undefined") {// 判斷是否引入 jquery throw new Error("該搜尋功能依賴於jquery外掛，需要引入jquery"); } if (typeof objId[0] == "undefined") {// 判斷是通過jquery獲取的id還是原生獲取的id,需要把原生的轉換成jquery this.objId = $(objId); // 需要搜尋的物件的id } else { this.objId = objId; // 需要搜尋的物件的id } if (typeof inputId[0] == "undefined") {// 判斷搜尋框獲取的方式，轉換成jquery獲取 var inp = $(inputId); } else { var inp = inputId; } // console.log('inp',inp) // if (typeof inp == 'string' || typeof inp == 'number') { // 判斷傳來的是 input 標籤，還是一個搜素內容 // this.inpIdContents = inp.trim() // } else { // } if (inp[0].tagName == "SELECT") { // 如果是以下拉框來篩選,則下拉框第一個選項為顯示所有資訊，即不搜尋 if (inp.val().trim() == inp.find('option:first').val()) { this.inpIdContents = '' // 搜尋的內容為空 } else { this.inpIdContents = inp.val().trim() // 獲取搜尋框裡的值,去除首尾空格 } } else { this.inpIdContents = inp.val().trim() // 獲取搜尋框裡的值,去除首尾空格 } // console.log(inp[0].tagName) // console.log(this.inpIdContents) // console.log(typeof inp) this.objType = this.objId[0].tagName; // 獲取需要被搜尋物件的標籤型別,將jquey轉化為原生js獲取標籤型別 // console.log(this.objId.find("tr th").length) // if (this.objId.find("tr th").length == 0) {// 判斷表格是否有表頭,沒有就建立錯誤資訊 // throw new Error("你要搜尋的表格沒有表頭 <th> 標籤，請規範好表格"); // } switch (this.objType) {// 判斷搜尋物件 case 'TABLE': this.tableSearch(); break; // 物件是表格，進行表格搜尋 } } this.init() } // 表1 $("#lin").on('keyup', function () { var table1 = $("#table-1"); var input = $(this); new Search(table1, input) }) // 表2 $('#select').on('change', function () { var content = $('#select') // 下拉框 var table2 = $('#table-2') new Search(table2, content, '#6332f6') }) </script> </body> </html>