jquery - CSS alternating table row to reset in a new table? -

i have 2 tables , alternating row colors reset based on new table. tr:odd seems applied across both of tables.

here's table html:

<table class='mytable'>     <tr class='myrow'>         <td>row 1</td>     </tr>     <tr class='myrow'>         <td>row 2</td>     </tr>     <tr class='myrow'>         <td>row 3</td>     </tr> </table> <hr> <table class='mytable'>     <tr class='myrow'>         <td>row 1</td>     </tr>     <tr class='myrow'>         <td>row 2</td>     </tr> </table> 

css:

.myaltrowclass { background: #dddddc; } 

javascript:

$(".mytable .myrow:odd").addclass('myaltrowclass'); 

jsfiddle: http://jsfiddle.net/niner/sgq9t/

the 1st table , 2nd table both have alternating colors, 1st row in table 2 should start out normal (white) color, , not alternate (grey) color.

i appreciate help. thanks.

sure, select rows of each table independantly:

$(".mytable").find('.myrow:odd').addclass('myaltrowclass'); 

js fiddle demo.

or, preferably, use css:

table.mytable tr:nth-child(even) {     background: #dddddc; } 

js fiddle demo.

note i've switched even in css :nth-child() example, because javascript zero-based, whereas css one-based.

or combining 2 approaches together:

$('.mytable tr:nth-child(even)').addclass('myaltrowclass'); 

js fiddle demo.