修改筛选器，使其仅应用于表中的可见行

Modify filter to apply only to the visible rows in the table

本文关键字：应用于 筛选 修改      更新时间：2023-09-26

我正在尝试使用dropdown filter过滤表中的内容。下面是我的代码。当只应用这个过滤器时，它工作得很好。但是当它应用于任何其他过滤器时，它也会考虑隐藏行。这就是为什么它与多个过滤器不兼容。我对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和:even选择器。

请参阅下面的示例代码片段:

var $rows = $("table#testTable tr:not(:first-child)");
function addRemoveClass() {
    var $visibleRows = $rows.filter(':visible');
    $visibleRows.removeClass("odd even");
    $visibleRows.filter(':odd').addClass("odd");
    $visibleRows.filter(':even').addClass("even");
}
$("#selectField, #selectField1").on("change", function() {
    var $filteredRows = $rows;
    // filter by the first input:
    var selected = $('#selectField').val();
    if (selected != "All") {
        $filteredRows = $filteredRows.filter("[position=" + selected + "]");
    }
    // accumulate the second input into the filter:
    selected = $('#selectField1').val();
    if (selected != "All") {
        $filteredRows = $filteredRows.filter("[OHQ=" + selected + "]");
    }
    // hide all rows, and then make the filtered rows visible:
    $rows.hide();
    $filteredRows.show();
    // apply the styles for alternating odd/even rows:
    addRemoveClass();
});
addRemoveClass();
.even { background: #ccc; }
.odd { background: #eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
position:
  <select id="selectField">
    <option value="All">All</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>&nbsp;
OHQ:
  <select id="selectField1">
    <option value="All">All</option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
  </select>
</p>
<table id="testTable">
  <tr><th>header</th></tr>
  <tr position="1" OHQ="a"><td>row 1, position=1, OHQ=a</td></tr>
  <tr position="2" OHQ="a"><td>row 2, position=2, OHQ=a</td></tr>
  <tr position="2" OHQ="a"><td>row 3, position=2, OHQ=a</td></tr>
  <tr position="2" OHQ="b"><td>row 4, position=2, OHQ=b</td></tr>
  <tr position="3" OHQ="b"><td>row 5, position=3, OHQ=b</td></tr>
  <tr position="3" OHQ="c"><td>row 6, position=3, OHQ=c</td></tr>
</table>

请注意，:odd和:even选择器使用基于零的编号，因此第一行(可见的)将被视为甚至。

相关文章：