テーブル交互の色nth-child：not（.class）

Question

私はテーブルに複数の<tr>を持っていますが、そのうちのいくつかには詳細がある<tr class="colapsed">が続きます。 <tr>タグのすべてに詳細があるわけではありません。 色を交互に作成する必要がありますが、折りたたみクラスは無視してください。私はtable>tbody>tr:nth-child(odd) { background:red }を使用しようとしましたが、私が望むように動作していないようです。

アイデア？

table>tbody>tr:not(.collapsed):nth-child(odd) { 
 
    background: red 
 
} 
 
.collapsed { 
 
    display: none 
 
}

<table class="rwd-table table-auto doubletr"> 
 
    <tbody> 
 
    <tr class=""> 
 
     <td> 
 
     <div>2016-10-02</div> 
 
     </td> 
 
     <td> 
 
     <div>2016-02-03</div> 
 
     </td> 
 
     <td> 
 
     <div>Pagamento por Multibanco</div> 
 
     </td> 
 
     <td> 
 
     <div></div> 
 
     </td> 
 
     <td> 
 
     <div>90</div> 
 
     </td> 
 
     <td> 
 
     <div>2895.01</div> 
 
     </td> 
 
     <td> 
 
     <div class="expand-wrap"> 
 
      <a class="expand" href="#"><i class="icon icon-plus"></i></a> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr class="collapsed"> 
 
     <td colspan="7"> 
 
     details here 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <div>2016-10-02</div> 
 
     </td> 
 
     <td> 
 
     <div>2016-02-03</div> 
 
     </td> 
 
     <td> 
 
     <div>Pagamento por Multibanco</div> 
 
     </td> 
 
     <td> 
 
     <div></div> 
 
     </td> 
 
     <td> 
 
     <div>90</div> 
 
     </td> 
 
     <td> 
 
     <div>2895.01</div> 
 
     </td> 
 
     <td> 
 
     <div class="expand-wrap"> 
 
      <a class="expand" href="#"><i class="icon icon-plus"></i></a> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr class="collapsed"> 
 
     <td colspan="7"> 
 
     details here 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <div>2016-10-02</div> 
 
     </td> 
 
     <td> 
 
     <div>2016-02-03</div> 
 
     </td> 
 
     <td> 
 
     <div>Pagamento por Multibanco</div> 
 
     </td> 
 
     <td> 
 
     <div></div> 
 
     </td> 
 
     <td> 
 
     <div>90</div> 
 
     </td> 
 
     <td> 
 
     <div>2895.01</div> 
 
     </td> 
 
     <td> 
 
     <div class="expand-wrap"> 
 
      <a class="expand" href="#"><i class="icon icon-plus"></i></a> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div>2016-10-02</div> 
 
     </td> 
 
     <td> 
 
     <div>2016-02-03</div> 
 
     </td> 
 
     <td> 
 
     <div>Pagamento por Multibanco</div> 
 
     </td> 
 
     <td> 
 
     <div></div> 
 
     </td> 
 
     <td> 
 
     <div>90</div> 
 
     </td> 
 
     <td> 
 
     <div>2895.01</div> 
 
     </td> 
 
     <td> 
 
     <div class="expand-wrap"> 
 
      <a class="expand" href="#"><i class="icon icon-plus"></i></a> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

答えhereは、私の状況を説明していません。私は奇妙なイベントが折り畳まれたクラスですべてのタグを検討するのを防ぐようにしています。

代替解像度
同じ状況の場合。 :nth-セレクタは可視性を気にしないので、簡単なjquery関数を使用して問題を解決しました。

var n = 1; 
 
$("table>tbody>tr:not('[class*=collapsed]')").each(function() { 
 
    if (n % 2) { //even 
 
    $(this).css("background", "red"); 
 
    } else { //odd 
 
    $(this).css("background", "yellow"); 
 
    } 
 
    n += 1; 
 
})

Answer 1

私は、これは:nth-セレクタは、視認性を気にしないことを考えると可能性であるとは考えていません。 :notのうち、望ましくないものがありますが、:nthはそのアルゴリズムではスキップしません。多分これが助けになるでしょうか？

http://nthmaster.com/