Jquery plugins 如何使用JQUERY使用多个表单输入动态筛选表行

我正在显示一个包含多行和多列的表。我正在使用一个名为uiTableFilter的JQUERY插件，它使用一个文本字段输入，并根据您提供的输入过滤（显示/隐藏）表行。您所要做的就是指定一个要筛选的列，它将只显示在该列中输入了文本字段的行。简单又好用

我想添加第二个文本输入字段，这将帮助我进一步缩小结果范围。例如，如果我有一个PETS表，其中一列是petType，另一列是petColor——我可以在第一个文本字段中键入CAT，以显示所有的CAT，然后在第二个文本字段中键入black，结果表将只显示发现黑猫的行。基本上是一个子集

下面是我正在使用的JQUERY：

   $("#typeFilter").live('keyup', function() {

    if ($(this).val().length > 2 || $(this).val().length == 0)
  {
                var newTable = $('#pets');
  $.uiTableFilter( theTable, this.value, "petType" );
  } 

   }) // end typefilter

   $("#colorFilter").live('keyup', function() {
    if ($(this).val().length > 2 || $(this).val().length == 0)
  {
  var newTable = $('#pets');
  $.uiTableFilter( newTable, this.value, "petColor" );

  } 

   }) // end colorfilter

问题是，我可以使用一个筛选器，它将显示表行的正确子集，但当我为另一个筛选器提供输入时，它似乎无法识别上一列中剩余的可见表行，而是似乎对原始表进行了全新的筛选。如果应用一个筛选器后返回10行，则第二个筛选器应仅应用于这10行。我试过生活和束缚，但没有工作

---

有人能解释一下我哪里出了问题吗？谢谢

uiTableFilter插件不支持您尝试执行的操作。快速查看源代码可以发现：

elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words(getText(elem), words, false)
        ? matches(elem)
        : noMatch(elem);
});

这扩展到（本质上）这一点：

因此，它所做的就是旋转所有行，

.show（）

匹配的行，以及

.hide（）

不匹配的行；uiTableSorter不注意行的当前显示/隐藏状态，无法告诉它在多个列上进行筛选

如果你真的需要你想要的功能，那么你可以修改插件的行为（代码很小很简单），或者自己编写。这是一个精简版，支持多个过滤器，是一个比uiTableFilter更传统的jQuery插件：

(function($) {
    $.fn.multiFilter = function(filters) {
        var $table = $(this);
        return $table.find('tbody > tr').each(function() {
            var tr = $(this);

            // Make it an array to avoid special cases later.
            if(!$.isArray(filters))
                filters = [ filters ];

            howMany = 0;
            for(i = 0, f = filters[0]; i < filters.length; f = filters[++i]) {
                var index = 0;
                $table.find('thead > tr > th').each(function(i) {
                    if($(this).text() == f.column) {
                        index = i;
                        return false;
                    }
                });
                var text = tr.find('td:eq(' + index + ')').text();
                if(text.toLowerCase().indexOf(f.word.toLowerCase()) != -1)
                    ++howMany;
            }
            if(howMany == filters.length)
                tr.show();
            else
                tr.hide();
        });
    };
})(jQuery);

---

这里有一个实例（假设您要在“颜色”之前的“类型”中输入一些内容）：

uiTableFilter插件不支持您尝试执行的操作。快速查看源代码可以发现：

elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words(getText(elem), words, false)
        ? matches(elem)
        : noMatch(elem);
});

这扩展到（本质上）这一点：

因此，它所做的就是旋转所有行，

.show（）

匹配的行，以及

.hide（）

不匹配的行；uiTableSorter不注意行的当前显示/隐藏状态，无法告诉它在多个列上进行筛选

如果你真的需要你想要的功能，那么你可以修改插件的行为（代码很小很简单），或者自己编写。这是一个精简版，支持多个过滤器，是一个比uiTableFilter更传统的jQuery插件：

(function($) {
    $.fn.multiFilter = function(filters) {
        var $table = $(this);
        return $table.find('tbody > tr').each(function() {
            var tr = $(this);

            // Make it an array to avoid special cases later.
            if(!$.isArray(filters))
                filters = [ filters ];

            howMany = 0;
            for(i = 0, f = filters[0]; i < filters.length; f = filters[++i]) {
                var index = 0;
                $table.find('thead > tr > th').each(function(i) {
                    if($(this).text() == f.column) {
                        index = i;
                        return false;
                    }
                });
                var text = tr.find('td:eq(' + index + ')').text();
                if(text.toLowerCase().indexOf(f.word.toLowerCase()) != -1)
                    ++howMany;
            }
            if(howMany == filters.length)
                tr.show();
            else
                tr.hide();
        });
    };
})(jQuery);

---

这里有一个活生生的例子（假设您将在“颜色”之前的“类型”中输入一些内容）：

哇，穆，这太神奇了。在Fiddle上尝试了你的代码，它可以工作，所以我将从那里修改它。非常感谢。如何使此代码正常工作，以便用户在“type”或“color”中输入内容时不会产生差异？@indiehacker:您可能需要更改

f（text.toLowerCase（）.indexOf）（f.wo…

一次检查多个地方，但这将是一个全新的问题。你是上帝！非常感谢。哇，穆，这太神奇了。在小提琴上尝试了你的代码，它工作了，所以我将从那里修改它。非常感谢。如何使此代码工作，以便用户在“类型”中输入内容不会产生任何影响或者“颜色”？@indiehacker:您可能需要将

f（text.toLowerCase（）.indexOf（f.wo…

部分更改为同时检查多个位置，但这将是一个全新的问题。您是上帝！非常感谢。