alternatywne kolory wiersz bez rozważa niewidocznych wierszy przy użyciu czystego CSS

Question

obciążenia mój stół wygląda

<table id="mytable"> 
    <tr><td>&nbsp;</td></tr> //odd color 
    <tr><td>&nbsp;</td></tr> //even color 
    <tr><td>&nbsp;</td></tr> //odd color 
    <tr><td>&nbsp;</td></tr> //even color 
</table> 

na jakiejś akcji staje się jak

<table id="mytable"> 
    <tr><td>&nbsp;</td></tr> //odd color 
    <tr style="display: none;"><td>&nbsp;</td></tr> //even color 
    <tr><td>&nbsp;</td></tr> //odd color 
    <tr><td>&nbsp;</td></tr> 
    <tr><td>&nbsp;</td></tr>` 
</table> 

jeśli 2. rzędzie jest niewidoczna 3 rzędzie powinien pokazać nawet kolor

Answer 1

Myślę, że nie można tego zrobić tylko w css. Myślę, że niektóre JQuery pomoże.

$('#mytable tr:visible').each(function(index){ 
    //Your code to add ODD and even class 
}) 

Answer 2

Spróbuj to prosta:

$("#mytable tr").removeClass("odd even"); 
 
$("#mytable tr:visible:odd").addClass("odd"); 
 
$("#mytable tr:visible:even").addClass("even");

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
} 
 
.odd { 
 
    background-color: #99FFFF; 
 
} 
 
.even { 
 
    background-color: #FFFF99; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='mytable'> 
 
    <tr> 
 
    <td>&nbsp;1111</td> 
 
    </tr> 
 
    <tr style="display: none;"> 
 
    <td>&nbsp;2222</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;3333</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;4444</td> 
 
    </tr> 
 
</table>

http://jsfiddle.net/fLc1aujb/