I need to style the table as a zebra, styling even rows of tables, I used the css \[code\]:nth-of-type(even)\[/code\]. But for example when I need to hide some of the stylized elements of the table is lost. What's the easiest way to create a dynamic styling as a zebra for a table?\[code\]<!DOCTYPE html><html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <style type="text/css"> table tr:nth-of-type(even){background: yellow;} </style> <script type="text/javascript"> function hideRow(){ $(".hidden").hide(); } </script></head><body><center> <table cellspacing="0" border="1"> <tbody> <tr class="table-row"> <td>row1</td> </tr> <tr class="table-row"> <td>row2</td> </tr> <tr class="table-row hidden"> <td>row3</td> </tr> <tr class="table-row"> <td>row4</td> </tr> <tr class="table-row"> <td>row5</td> </tr> </tbody> </table> <input type="submit" onclick=" hideRow()" value="http://stackoverflow.com/questions/14459523/submit"/> </center></body></html>\[/code\]How can I dynamically change the style of the table?