使用Jquery过滤表行
我发现了一个基于input字段的表过滤东西的Jquery脚本。 这个脚本基本上是采取filter，拆分每个单词和每个单词过滤表行。 所以最后你会得到一个包含input字段中所有单词的行列表。
http://www.marceble.com/2010/02/simple-jquery-table-row-filter/
var data = this.value.split(" "); $.each(data, function(i, v){ jo = jo.filter("*:contains('"+v+"')"); }); 现在，我需要的是，而不是筛选包含input字段中的每个单词的行。 我想过滤input字段中至less包含一个单词的所有行。
我试过的一种方法是将每个过滤的列表放入一个数组中…
var rows = new Array(); $.each(data, function(i, v){ rows[i] = jo.filter("*:contains('"+v+"')"); });
在这个阶段，我必须在“rows”数组中创build所有行的UNION并显示它们。 我迷失在如何做到这一点。
以上脚本在行动 – http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540
如果我在filter中input“cat 6”，我想显示三行。
看看这个jsfiddle 。
这个想法是用函数来过滤行，这些函数将循环通过单词。
jo.filter(function (i, v) { var $t = $(this); for (var d = 0; d < data.length; ++d) { if ($t.is(":contains('" + data[d] + "')")) { return true; } } return false; }) //show the rows that match. .show();
编辑：请注意，大小写不敏感的过滤不能实现使用:contains()select器，但幸运的是有text()函数，所以filterstring应uppercased和条件更改为if ($t.text().toUpperCase().indexOf(data[d]) > -1) 。 看看这个jsfiddle 。
没有必要build立一个数组。 您可以直接寻址DOM。
试试：
rows.hide(); $.each(data, function(i, v){ rows.filter(":contains('" + v + "')").show(); });
DEMO
编辑
要发现合格的行而不立即显示它们，然后将它们传递给一个函数：
$("#searchInput").keyup(function() { var rows = $("#fbody").find("tr").hide(); var data = this.value.split(" "); var _rows = $();//an empty jQuery collection $.each(data, function(i, v) { _rows.add(rows.filter(":contains('" + v + "')"); }); myFunction(_rows); });
更新的演示
我select了@ nrodic的答案（顺便说一下，谢谢），但是它有几个缺点：
1）如果你有包含“猫”，“狗”，“鼠标”，“猫狗”，“猫狗鼠标”（每个单独的行）的行，那么当你明确search“猫狗鼠标”会显示“猫”，“狗”，“鼠标”，“猫狗”，“猫狗鼠标”等行。
2）.toLowerCase（）没有实现，也就是说，当你input小写string时，不会显示匹配大写字母的行。
所以我想出了@ nrodic代码的分支，在哪里
var data = this.value; //plain text, not an array
和
jo.filter(function (i, v) { var $t = $(this); var stringsFromRowNodes = $t.children("td:nth-child(n)") .text().toLowerCase(); var searchText = data.toLowerCase(); if (stringsFromRowNodes.contains(searchText)) { return true; } return false; }) //show the rows that match. .show();
这里是完整的代码： http : //jsfiddle.net/jumasheff/081qyf3s/
基于@ CanalDoMestre的答案。 我添加了空白filter的支持，修复了一个错字，并防止隐藏行，所以我仍然可以看到列标题。
$("#filterby").on('keyup', function() { if (this.value.length < 1) { $("#list tr").css("display", ""); } else { $("#list tbody tr:not(:contains('"+this.value+"'))").css("display", "none"); $("#list tbody tr:contains('"+this.value+"')").css("display", ""); } });
我有一个非常简单的function：
function busca(busca){ $("#listagem tr:not(contains('"+busca+"'))").css("display", "none"); $("#listagem tr:contains('"+busca+"')").css("display", ""); }
tr：不是（：包含（….为我工作
function busca(busca){ $("#listagem tr:not(:contains('"+busca+"'))").css("display", "none"); $("#listagem tr:contains('"+busca+"')").css("display", ""); }
nrodic有一个惊人的答案，我只是想给一个小的更新，让你知道，一个小的额外的function，你可以扩展包含方法不区分大小写：
$.expr[":"].contains = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; });
我使用了Beetroot-Betroot的解决scheme，但是不使用contains，而是使用containsNC，这使得它不区分大小写。
$.extend($.expr[":"], { "containsNC": function(elem, i, match, array) { return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; } });
