colori delle righe alternative senza considerare le righe invisibili usando CSS puro

Question

sul carico mio tavolo assomiglia

<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> 

su qualche azione diventa come

<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> 

se seconda fila non è visibile 3 ° fila dovrebbe mostrare ancora colore

Answer 1

Penso che non puoi farlo solo in css. Penso che alcuni JQuery aiuteranno.

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

Answer 2

Prova questa semplice:

$("#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/