表格内容筛选
作者:互联网
利用 contains 选择器结合 jQuery 的 filter()
筛选方法,可以实现表格的过滤。
filter() 方法:
-
filter()
方法返回符合一定条件的元素。 -
该方法让您规定一个条件。不符合条件的元素将从选择中移除,符合条件的元素将被返回。
-
该方法通常用于缩小在被选元素组合中搜索元素的范围。
-
filter()
方法是与not()
方法相对的。
语法为:
$(selector).filter(criteria,function(index))
参数说明:
-
criteria 可选。规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素。如需规定多个条件,请使用逗号分隔。
-
function(index) 可选。为集合中的每个元素规定要运行的函数。如果返回 true,则保留元素,否则元素将被移除。index - 集合中元素的 index 位置。this 是当前的 DOM 元素。
例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jquery-3.3.1.js"></script> </head> <body> <div> <br /> 筛选:<input id="filterName" /> <br /> </div> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> </thead> <tbody> <tr> <td>张一</td> <td>男</td> <td>浙江宁波</td> </tr> <tr> <td>张二</td> <td>女</td> <td>浙江杭州</td> </tr> <tr> <td>张三</td> <td>男</td> <td>湖南长沙</td> </tr> <tr> <td>李四</td> <td>男</td> <td>浙江温州</td> </tr> <tr> <td>李五</td> <td>男</td> <td>浙江杭州</td> </tr> <tr> <td>李六</td> <td>女</td> <td>浙江杭州</td> </tr> <tr> <td>王七</td> <td>男</td> <td>浙江杭州</td> </tr> <tr> <td>王八</td> <td>女</td> <td>浙江杭州</td> </tr> <tr> <td>王九</td> <td>男</td> <td>湖南长沙</td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function(){ $('#filterName').keyup(function(){ $('table tbody tr') .hide() .filter(":contains('" + $(this).val() + "')") .show(); }); }); </script> </body> </html>标签:function,index,表格,元素,filter,内容,浙江,筛选,方法 来源: https://www.cnblogs.com/goodgongdstudy/p/14704818.html