Javascript 修改筛选器以仅应用于表中的可见行

我正在尝试使用

下拉过滤器

过滤表中的内容。下面是我的代码。当仅应用此过滤器时，它工作正常。但当它应用于任何其他过滤器时，它也会考虑隐藏行。这就是它与多个过滤器不兼容的原因。我对Jquery不是很有经验。因此，如果有人能提供同样的意见，我将不胜感激

$(document).ready(function() {

   function addRemoveClass(theRows) {

        theRows.removeClass("odd even");
        theRows.filter("tr:visible:odd").addClass("odd");
        theRows.filter("tr:visible:even").addClass("even");
    }
    var rows = $("table#testTable tr:not(:first-child)");

 //   addRemoveClass(rows);


    $("#selectField1").on("change", function() {

        var selected = this.value;

        if (selected != "All") {

            rows.filter("[OHQ=" + selected + "]").show();
            rows.not("[OHQ=" + selected + "]").hide();
           addRemoveClass(visibleRows);
        } else {

            rows.show();
           addRemoveClass(rows);

        }

    });
});

---

累积过滤器的一种方法是在每次更改时重新应用所有过滤器，因此还可以提取定义组合过滤器的任何其他输入的值。这可以通过为所有过滤器输入更改创建一个事件处理程序，并处理该处理程序中所有输入的值来构建一个组合过滤器来实现

其次，要以交替方式为行着色，即使在过滤时，也应该通过过滤

：visible

，然后使用jQuery特定的

：odd

和

：偶数

选择器来获取行

有关演示，请参见下面的代码段：

var$rows=$（“表#testTable tr:not（：first child）”）；
函数addRemoveClass（）{
var$visibleRows=$rows.filter（':visible'）；
$visibleRows.removeClass（“奇偶”）；
$visibleRows.filter（':odd'）.addClass（“odd”）；
$visibleRows.filter（':偶数'）.addClass（“偶数”）；
}
$（“#选择字段，#选择字段1”）。在（“更改”，函数（）上{
var$filteredRows=$rows；
//按第一个输入进行筛选：
var selected=$（'#selectField'）.val（）；
如果（选中！=“全部”）{
$filteredRows=$filteredRows.filter（“[position=“+selected+”]”）；
}
//将第二个输入累积到过滤器中：
selected=$（'#selectField1'）.val（）；
如果（选中！=“全部”）{
$filteredRows=$filteredRows.filter（“[OHQ=“+selected+”]”）；
}
//隐藏所有行，然后使筛选的行可见：
$rows.hide（）；
$filteredRows.show（）；
//为交替奇偶行应用样式：
addRemoveClass（）；
});
addRemoveClass（）
偶数{背景：#ccc；}
.odd{背景：#eee；}


职位：
全部的
1.
2.
3.
OHQ：
全部的
A.
B
C

标题
第1行，位置=1，OHQ=a
第2行，位置=2，OHQ=a
第3行，位置=2，OHQ=a
第4行，位置=2，OHQ=b
第5行，位置=3，OHQ=b
第6行，位置=3，OHQ=c
您能更具体地说明您的问题吗？您也能粘贴HTML代码吗？这样，创建JS提琴并尝试解决您的问题就更容易了。@ZombieChowder下面是我从db动态生成的代码和表格。您好，先生，感谢您的快速响应。但它的工作方式和以前一样。它对整个表应用筛选器，而不是只对可见行应用筛选器。我更新了我的答案，以处理有关累积筛选器的问题。