1

我正在尝试过滤具有多个关键字的表，如果tr包含所有关键字，则显示。我发现了一些在 a 上效果很好 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");
}
});
4

2 回答 2

1

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

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

即，如果最后一个值匹配，则只有您的代码运行良好。

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

在遍历所有内容之后td，tr如果matches=1我删除了课程hidden

添加filter_tags_length以计算过滤器标签的长度。

遍历所有td集合tr后matches=1iffilter_tags_length等于 variable 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");
    }
});
于 2013-07-25T16:24:46.910 回答
0

我今天出于类似目的写了这篇文章……希望对您有所帮助！

$("#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();                 
    });
});
于 2014-12-03T18:40:23.887 回答