Question

我正在尝试使用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);

        }

    });
});

Answer 1

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

其次，要以交替方式为行着色，即使在过滤时，也应通过过滤:visible来获取行，然后使用jQuery特定的:odd和:even选择器。

请参阅下面的代码段以获取演示：

＆＃13;

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();

＆＃13;

.even { background: #ccc; }
.odd { background: #eee; }

＆＃13;

<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>

＆＃13;

请注意，:odd和:even选择器使用从零开始的编号，因此第一个（可见）行将被视为甚至。如果您想要反过来，则交换类名。

修改过滤器以仅应用于表中的可见行

1 个答案: