使用 Jquery 过滤表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17074687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Filtering Table rows using Jquery
提问by RKodakandla
I found a Jquery script that does the table filtering stuff based on input field. This script basically takes the filter, splits each word and filters table rows with each word. So at the end you'll have a list of rows that have all the words in the input field.
我找到了一个 Jquery 脚本，它根据输入字段执行表过滤操作。该脚本基本上采用过滤器，拆分每个单词并使用每个单词过滤表行。所以最后你会得到一个包含输入字段中所有单词的行列表。
http://www.marceble.com/2010/02/simple-jquery-table-row-filter/
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+"')");
});
Now, what I need is that instead of filtering rows that contains each of the words in the input field. I want to filter all the rows that contain at least one of the word in the input field.
现在，我需要的是，而不是过滤包含输入字段中的每个单词的行。我想过滤输入字段中至少包含一个单词的所有行。
One way I've tried is to take each filtered lists into an array...
我尝试过的一种方法是将每个过滤列表放入一个数组中...
var rows = new Array();
$.each(data, function(i, v){
rows[i] = jo.filter("*:contains('"+v+"')");
});
At this stage, I have to make a UNION of all the rows in "rows" array and show them. I'm lost on how to do that exactly.
在这个阶段，我必须对“rows”数组中的所有行进行联合并显示它们。我完全不知道如何做到这一点。
Above script in action - http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540
以上脚本正在运行 - http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540
If I type "cat six" in the filter, I want to show three rows.
如果我在过滤器中输入“cat 6”，我想显示三行。
回答by nrodic
Have a look at this jsfiddle.
看看这个jsfiddle。
The idea is to filter rows with function which will loop through words.
这个想法是用循环遍历单词的函数过滤行。
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();
EDIT:Note that case insensitive filtering cannot be achieved using :contains()selector but luckily there's text()function so filter string should be uppercased and condition changed to if ($t.text().toUpperCase().indexOf(data[d]) > -1). Look at this jsfiddle.
编辑：请注意，使用:contains()选择器无法实现不区分大小写的过滤，但幸运的是有text()函数，因此过滤器字符串应该大写并且条件更改为if ($t.text().toUpperCase().indexOf(data[d]) > -1). 看看这个jsfiddle。
回答by Beetroot-Beetroot
There's no need to build an array. You can address the DOM directly.
无需构建数组。您可以直接寻址 DOM。
Try :
尝试 ：
rows.hide();
$.each(data, function(i, v){
rows.filter(":contains('" + v + "')").show();
});
EDIT
编辑
To discover the qualifying rows without displaying them immediately, then pass them to a function :
要发现符合条件的行而不立即显示它们，然后将它们传递给函数：
$("#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);
});
回答by Murat Jumashev
I chose @nrodic's answer (thanks, by the way), but it has several drawbacks:
我选择了@nrodic 的答案（顺便说一下，谢谢），但它有几个缺点：
1) If you have rows containing "cat", "dog", "mouse", "cat dog", "cat dog mouse" (each on separate row), then when you search explicitly for "cat dog mouse", you'll be displayed "cat", "dog", "mouse", "cat dog", "cat dog mouse" rows.
1) 如果您有包含“cat”、“dog”、“mouse”、“cat dog”、“cat dog mouse”（每个在单独的行上）的行，那么当您明确搜索“cat dog mouse”时，您将显示“猫”、“狗”、“老鼠”、“猫狗”、“猫狗老鼠”行。
2) .toLowerCase() was not implemented, that is, when you enter lower case string, rows with matching upper case text will not be showed.
2) .toLowerCase() 没有实现，即输入小写字符串时，不会显示匹配大写文本的行。
So I came up with a fork of @nrodic's code, where
所以我想出了@nrodic 代码的一个分支，其中
var data = this.value; //plain text, not an array
and
和
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();
Here goes the full code: http://jsfiddle.net/jumasheff/081qyf3s/
回答by xeo
based on @CanalDoMestre's answer. I added support for the blank filter case, fixed a typo and prevented hiding the rows so I can still see the column headers.
基于@CanalDoMestre 的回答。我添加了对空白过滤器案例的支持，修复了一个错字并防止隐藏行，因此我仍然可以看到列标题。
$("#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", "");
}
});
回答by CanalDoMestre
i have a very simple function:
我有一个非常简单的功能：
function busca(busca){
$("#listagem tr:not(contains('"+busca+"'))").css("display", "none");
$("#listagem tr:contains('"+busca+"')").css("display", "");
}
回答by I_Am_Hated
tr:not(:contains(.... work for me
tr:not(:contains(.... 为我工作
function busca(busca){
$("#listagem tr:not(:contains('"+busca+"'))").css("display", "none");
$("#listagem tr:contains('"+busca+"')").css("display", "");
}
回答by David O'Regan
nrodic has an amazing answer, and I just wanted to give a small update to let you know that with a small extra function you can extend the contains methid to be case insenstive:
nrodic 有一个惊人的答案，我只是想提供一个小的更新，让您知道通过一个小的额外功能，您可以将 contains 方法扩展为不区分大小写：
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
回答by Kamran Ul Haq
Adding one more approach :
添加另一种方法：
value = $(this).val().toLowerCase();
$("#product-search-result tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
回答by Philipp S.
I used Beetroot-Betroot's solution, but instead of using contains, I used containsNC, which makes it case insensitive.
我使用了 Beetroot-Betroot 的解决方案，但我没有使用 contains，而是使用了 containsNC，这使得它不区分大小写。
$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText ||
"").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
