使用Jquery过滤表格行

Question

我发现了一个基于输入字段的Jquery脚本，可以进行表格过滤。该脚本基本上会将过滤器拆分为每个单词，并使用每个单词过滤表格行。因此，最终您将得到一个包含输入字段中所有单词的行列表。

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+"')");
});

现在，我需要的是，不再过滤包含输入字段中每个单词的行。我想要过滤包含输入字段中至少一个单词的所有行。

我尝试的一种方法是将每个过滤列表放入数组中...

  var rows = new Array();

 $.each(data, function(i, v){
     rows[i] = jo.filter("*:contains('"+v+"')");
 });

在这个阶段，我必须将“行”数组中的所有行合并并显示它们。我不知道如何确切地做到这一点。

上面的脚本示例 - http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540 如果我在过滤器中输入“cat six”，我想显示三行。

- RKodakandla

Answer 1

请查看这个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()选择器实现不区分大小写的过滤，但幸运的是有text()函数，因此过滤字符串应该转换为大写并将条件更改为if ($t.text().toUpperCase().indexOf(data[d]) > -1)。请查看这个jsfiddle。

- nrodic

---

我喜欢这个解决方案。非常全面，利用了jQuery的filter()方法。 - taylor michels

工作正常，但它匹配包含最新输入术语的任何行。有没有办法让它搜索第一个术语的结果以查找第二个术语？ - Timmah

@Timmah - 你是否只想显示包含全部关键词的行？这个jsfiddle可能是你需要的。 - nrodic

@nrodic - 没错，我在**这里**提问并得到了一个非常相似的答案，但还是谢谢。 - Timmah

这是一个很好的解决方案。您能否使它不区分大小写？ - Kennyomar

Answer 2

不需要构建一个数组。你可以直接访问DOM。

尝试使用：

rows.hide();
$.each(data, function(i, v){
    rows.filter(":contains('" + v + "')").show();
});

演示

编辑

如果想要发现符合条件的行但不立即将它们显示出来，则可以将它们传递给一个函数：

$("#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);
});

更新后的演示

- Beetroot-Beetroot

---

我想我说得太早了。你的答案完全回答了我的问题，但我需要更多的信息。我不想在找到匹配值后立即显示行。我需要将所有这些行列成一个列表并传递给另一个函数。 - RKodakandla

在你过滤并移除筛选器后，没有结果被给出，而所有的结果都应该被显示出来。 - Dane411

丹尼，你说得对 - 我的演示没有涉及到那个方面。请尝试使用这个更新，其中空过滤器被视为特殊情况进行处理。 - Beetroot-Beetroot

简单明了。有没有办法使它不区分大小写？ - nclsvh

@RickSmith，你有什么办法可以让这个不区分大小写吗？我想不出来。 - nclsvh

请参考此答案，了解如何覆盖过滤器以实现不区分大小写：https://dev59.com/U2oy5IYBdhLWcg3wJKvQ#8747204 - MichaelCleverly

Answer 3

I chose @nrodic's answer (thanks, by the way), but it has several drawbacks:

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.

2) .toLowerCase() was not implemented, that is, when you enter lower case string, rows with matching upper case text will not be showed.

So I came up with a fork of @nrodic's code, where

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/

- Murat Jumashev

---

新增的好处是，你版本中的退格键可以将所有值恢复到显示器上。 - noogrub

未来的读者请注意：你可以轻松地将 $t.children() 选择器从 "td:nth-child(n)" 更改为类似于 "filter-criteria" 的 class。然后，将该类添加到每个 <td> 中，限制筛选器搜索的列数。 - vastlysuperiorman

stringsFromRowNodes.contains需要更改为stringsFromRowNodes.includes。我已经编辑了这篇文章的代码以反映这一点。(可能正在等待审核)我没有更改JSFiddle。 - Karl_S

Answer 4

根据@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", "");
        }
    });

- xeo

Answer 5

i have a very simple function:

function busca(busca){
    $("#listagem tr:not(contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}

- CanalDoMestre

---

应该是 tr:not(:contains。 - mxmissile

Answer 6

tr:not(:contains(.... 对我无效

function busca(busca){
    $("#listagem tr:not(:contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}

- I_Am_Hated

Answer 7

nordic提供了一个很棒的答案，我想更新一下让你知道，通过添加一个小的额外函数，你可以扩展contains方法以不区分大小写：

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

- David O'Regan

Answer 8

再添加一种方法：

最初的回答：

value = $(this).val().toLowerCase();
$("#product-search-result tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});

- Kamran Ul Haq

Answer 9

我使用了Beetroot-Betroot的解决方案，但是没有使用contains而是使用了containsNC，它可以忽略大小写。

$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText ||
"").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

- Philipp S.