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

在这个阶段，我必须对“rows”数组中的所有行进行 UNION 并显示它们。我不知道该怎么做。

上面的脚本在行动 - http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540

如果我在过滤器中输入“cat 6”，我想显示三行。

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。

Answer 2

无需构建数组。您可以直接寻址 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);
});

UPDATED DEMO

Answer 3

我选择了@nrodic 的答案（顺便说一句，谢谢），但它有几个缺点：

1) 如果您有包含“cat”、“dog”、“mouse”、“cat dog”、“cat dog mouse”的行（每行都在单独的行上），那么当您明确搜索“cat dog mouse”时，您将显示“猫”、“狗”、“鼠标”、“猫狗”、“猫狗鼠标”行。

2) .toLowerCase() 未实现，即输入小写字符串时，不显示匹配大写文本的行。

所以我想出了@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/

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

Answer 5

我有一个非常简单的功能：

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

Answer 6

tr:not(:contains(....为我工作

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

Answer 7

nrodic 有一个惊人的答案，我只是想提供一个小更新，让您知道通过一个小的额外功能，您可以扩展 contains 方法以区分大小写：

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

Answer 8

添加另一种方法：

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

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;
}
});