Блог

Я пытаюсь отфильтровать содержимое в таблице с помощью 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>amp;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 используют нумерацию на основе нуля, поэтому первая (видимая) строка будет считаться четной. Поменяйте имена классов местами, если хотите, чтобы было наоборот.