Alternative line colors excluding invisible lines using pure css

Question

when loading my table looks like

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

with any action he becomes like

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

if the 2nd line is not displayed, the 3rd line should even show color

Answer 1

Try this simple one:

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

Answer 2

I think you cannot do this only in css. I think some jQuery will help.

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