Question

我正在尝试使用多个关键字过滤表格，如果tr包含所有关键字，则会显示。我在ul找到了一些效果很好的东西，但在桌子上表现得很好。这里是jsfiddle：http://jsfiddle.net/AtkNW/81/

过滤器似乎只检查每个td的第二个或第三个tr。我错过了什么？我可以用一只手。

$("#kwd_search").keyup(function () {

var filter = $(this).val().toLowerCase(),
    count = 0;
var length = $(this).val().length;
if (length > 1) {
    var filter_tags = filter.split(" ");
    $("#dep td").each(function () {
        var $this = $(this);
        var matches = true;
        $.each(filter_tags, function (i, a_filter) {
            if ($this.text().toLowerCase().indexOf(a_filter) === -1) {
                matches = false;
            }
        });
        if (matches) {
            $this.parent("tr").removeClass("hidden");
        } else {
            $this.parent("tr").addClass("hidden");
        }
    });
} else {
    $("#dep td").parent("tr").removeClass("hidden");
}
});

Answer 1

工作演示http://jsfiddle.net/cse_tushar/E9bTu/1

您的代码错误是在遍历所有td后，您将匹配值更改为false。

即。如果最后一个值匹配，那么只有你的代码运行正常。

我为每个tr n运行的代码更改了代码中包含td的代码，并且在找到匹配matches=0时也默认替换了代码matches=1。

如果td移动tr，则移动一个matches=1中的所有hidden后移除filter_tags_length

添加了td来计算过滤器代码的长度。

如果tr等于变量matches=1，则在filter_tags_length个c集中遍历所有$("#kwd_search").keyup(function () { var filter = $.trim($(this).val().toLowerCase()); count = 0; var length = $.trim($(this).val().length); if (length > 1) { var filter_tags = filter.split(" "); var filter_tags_length = filter_tags.length; $("#dep tr:gt(0)").each(function () { count++; i = 0; matches = 0; c = 0; $(this).find('td').each(function () { var $this = $(this); var lenght_td = $this.parents('tr').find('td').length; i++; $.each(filter_tags, function (i, a_filter) { if ($this.text().toLowerCase().indexOf(a_filter) !== -1) { c++; if (c == filter_tags_length) { matches = 1; } } }); // console.log(matches); if (i == lenght_td) { if (matches > 0) { $(this).parents("tr").removeClass("hidden"); } else { $(this).parents("tr").addClass("hidden"); } } }); //console.log('next'+count); }); } else { $("#dep td").parent("tr").removeClass("hidden"); } });后。

{{1}}

Answer 2

我今天为了类似的目的写了这个...希望它有所帮助！

$("#kwd_search").keyup(function () {
    var jqSearchBox = $(this);
    var rows = $("#dep > tbody > tr");

    if (jqSearchBox.val().length < 2) {
        rows.show();
        return;
    } else {
        rows.hide();
    }

    // split, trim, lowercase, and remove empty strings
    var searchTerms = $.map(jqSearchBox.val().toLowerCase().split(" "), function (el) {
        return el !== "" ? $.trim(el) : null;
    });

    rows.each(function () {
        var row = $(this);
        var foundAll = true;

        $.each(searchTerms, function (idx, val) {
            if (row.text().toLowerCase().indexOf(val) === -1) {
                foundAll = false;
                return false;
            }
        });

        if (foundAll)
            row.show();                 
    });
});

jQuery表上的多值过滤器

2 个答案: