特定の行を表示/非表示にすると、1行おきに陰影が表示されます

Question

アクティブ/非アクティブなユーザーの表があり、変更されるとアクティブまたは非アクティブのユーザーの表示を切り替えるドロップダウンがあります。それは正常に動作していますが、私はどのように他の行を陰にしておくのか分かりません。私は、ドロップダウン後に各関数の最後に

$(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");

を追加しました変更されたが、私の推測では、すべての行にかかわらず、視認性の偶数か奇数非常に冒頭としてマークされ、変更されません。表示されているかどうかに基づいて表示されます。したがって、ページをロードするとき（アクティブフィルタ上で）、他の行はすべて陰影付けされますが、ドロップダウン（行のブロックは影付き）を変更するとシェーディングがオフになります。

コード：

$(document).ready(function(){ 

    // on load, show only active users 
    $('#tableUsers tr').each(function(){ 
       var status = ($(this).attr('id')); 
       if (status == 'userInactive'){ 
        $(this).hide(); 
       } 
       else if (status == 'userActive'){ 
        $(this).show(); 
       }    
    }); 

    $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr"); 


    $('#userTypeDropDown').change(function(){ 
     var option = $(this).val(); 

     if (option == 'Active'){ 
      $('#tableUsers tr').each(function(){ 
       var status = ($(this).attr('id')); 
       if (status == 'userInactive'){ 
        $(this).hide(); 
       } 
       else if (status == 'userActive'){ 
        $(this).show(); 
       } 
      }); 
      $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr"); 
     } 

     if (option == 'Inactive'){ 
      $('#tableUsers tr').each(function(){ 
       var status = ($(this).attr('id')); 
       if (status == 'userActive'){ 
        $(this).hide(); 
       } 
       else if (status == 'userInactive'){ 
        $(this).show(); 
       } 
      }); 
      $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr"); 
     } 

     if (option == 'Both'){ 
      $('#tableUsers tr').each(function(){ 
        $(this).show(); 
      }); 
      $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr"); 
     } 

    }); 
}); 

Answer 1

はここで働いてjsfiddleだクラスを適用します。http://jsfiddle.net/E8wvK/

は、私は完全にJavaScriptがはるかに少ない冗長で、より効率的に書き直しました。ここに後世のために

はコードです：

HTML

<select id="show"> 
    <option value="">All</option> 
    <option value="active">Active</option> 
    <option value="inactive">Inactive</option> 
</select> 
<table> 
    <tr class="active-user"><td>John Doe</td></tr> 
    <tr class="active-user"><td>Jane Doe</td></tr> 
    <tr class="inactive-user"><td>Tony Stark</td></tr> 
    <tr class="active-user"><td>Bruce Wayne</td></tr> 
    <tr class="inactive-user"><td>Clark Kent</td></tr> 
    <tr class="inactive-user"><td>Lois Lane</td></tr> 
    <tr class="active-user"><td>Peter Parker</td></tr> 
    <tr class="active-user"><td>Harry Osborne</td></tr> 
    <tr class="active-user"><td>Mary Jane Watson</td></tr> 
    <tr class="inactive-user"><td>Bruce Banner</td></tr> 
</table> 

CSS

tr.alt { background:#c0c0c0; } 

JS

function toggleRows() { 
    var selected = $('#show').val(); 

    switch (selected) { 
     case 'active': 
      var $rows = $('.active-user'); 
      $rows.show(); 
      $('.inactive-user').hide(); 
      break; 
     case 'inactive': 
      var $rows = $('.inactive-user'); 
      $rows.show(); 
      $('.active-user').hide(); 
      break; 
     default: 
      var $rows = $('tr'); 
      $rows.show(); 
    } 
    $rows.removeClass('alt').filter(':even').addClass('alt'); 
} 

toggleRows(); 

$('#show').change(function(){ 
    toggleRows(); 
}); 

Answer 2

は、あなたのテーブルからあなたのマークアップを共有する気にしませんか？

tr要素をループして「id」属性にアクセスしているようです。各id属性は一意でなければならず、あなたの場合、id値が "userInactive"と "userActive"の複数のtr要素を持つことになります。

Answer 3

$(this).find("#tableUsers tr") 
    .not(":hidden") 
    .filter(function(index){ 
     return index % 2 === 0; 
    }) 
    .addClass("altr"); 

私はこれをテストしていませんが、このアプローチを試すことができます。機能に渡し、結果として得られる選択の指標が偶数か奇数であるかどうかを確認し、それに応じて