<p>I have been using <a href="http://jquery.com/">jQuery</a> to do table striping, and up until today, I have not had any problems with it.</p>

<p>I had just been using the <a href="http://docs.jquery.com/Selectors/even">:even</a> and <a href="http://docs.jquery.com/Selectors/odd">:odd</a> selectors to add classes to each table row.</p>

<p>Here is the code that I have been using:</p>
<div class="codeblock"><code>
$(document).ready(function(){<br /> $("table.striped tbody tr:odd").addClass("odd");<br /> $("table.striped tbody tr:even").addClass("even");<br />}); 

</code></div>
<p>Seems easy enough. Then I just styled the odd table rows like so:</p>
<div class="codeblock"><code>
table.striped tr.odd td { background-color: #f0f0f4; } 

</code></div>
<p>One thing to note is that the <strong>:even</strong> and <strong>:odd</strong> selectors are zero-indexed, so the <strong>first table row will have a class of even, and not odd</strong>. <a href="//assets.trevor-davis.com/play/jquery-table-striping/">Here is an example showing this simple striping</a>.</p>

<h2>Multiple Striped Instances</h2>
<p>The situation that I had today had two different tables that were being striped. So based on the code, you would think that there wouldn’t be a problem. <a href="//assets.trevor-davis.com/play/jquery-table-striping/multiple-striping-instances/">Here is the example with two striped tables on the same page</a>.</p>

<p>Weird, so it looks like the first table row in the second striped table has a class of even instead of odd. I thought that the client may not like that because the two tables were not consistent, so I tried to think of another way to do the striping.</p>

<h2>The nth Child</h2>
<p>So based on the documentation, it looks like <a href="http://docs.jquery.com/Selectors/nthChild#index">the nth child selector</a> would be the solution. I just modified my JavaScript like so:</p>
<div class="codeblock"><code>
$(document).ready(function(){<br /> $("table.striped tbody tr:nth-child(odd)").addClass("odd");<br /> $("table.striped tbody tr:nth-child(even)").addClass("even");<br />}); 

</code></div>
<p>As a note, <strong>the nth child selector is not zero indexed</strong>, so the first table row will have a class of odd instead of even. <a href="//assets.trevor-davis.com/play/jquery-table-striping/using-nth-child/">Here is the fixed example</a>.</p>

<h2>Conclusion</h2>
<p>From what I can tell, this does not appear to be a browser problem, but a bug in jQuery. I have checked this in Firefox, Safari, IE6 and IE7.</p>