テーブルの表示行にのみ適用するようにフィルタを変更

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

一つの方法は、これもまた合成フィルタを定義する任意の他の入力の値（複数可）を拾って、各変更にすべてのフィルタを再適用することです。これは、すべてのフィルタ入力変更に対して1つのイベントハンドラを作成し、そのハンドラ内のすべての入力値を処理して1つの結合フィルタを構築することによって実行できます。

第二に、フィルタ処理しても、あなたが:visibleのためにフィルタリングすることで行を取得した後、jQueryの特定:oddと:evenセレクタを使用する必要があり、交互に行を着色します。

デモの以下のスニペット参照：:oddと:evenセレクタは、ゼロベースの番号付けを使用し、第1の（可視）行としてみなされること

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>

注でも。あなたがそれを逆にしたい場合は、クラス名を交換してください。