Table Row Odd / Even Reset

Question

I use this:

jQuery("tr:odd").css("background-color", "#f5f5f5"); jQuery("tr:even").css("background-color", "#ececec"); 

Just add the background color to the alternating rows of the table, which works great. The problem is that if there are several tables on one page, it simply repeats each table instead of resetting each table and starts a new one. My background color th the same color as my even lines. Therefore, in the end, it catches up, and I have th and tr that have the same color, so it looks like one big line.

How can I use these two jquery lines, but run it for each table on the page if there are multiple tables?

Answer 1

Start by selecting the tables, then find the child rows:

 jQuery("table").find("tr:odd").css("background-color","#f5f5f5"); 

http://jsfiddle.net/mblase75/xgQ8Q/

Vega's answer uses the same approach with fewer characters.

Answer 2

Try using table in the context as shown below.

 jQuery("tr:odd", 'table').css("background-color", "#f5f5f5"); jQuery("tr:even", 'table').css("background-color", "#ececec"); 

Answer 3

 jQuery("table tr:nth-child(odd)").css("background-color", "red"); jQuery("table tr:nth-child(even)").css("background-color", "yellow"); 

http://jsfiddle.net/xgQ8Q/5/