<!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>