JQuery alternate colors of *groups of rows* in a table
<p>I have a table with multiple TBODY elements (one for each month in a year) and would like to alternate row colors <em>within the TBODY element</em>.</p>

<p>For illustration, I have a table with the following basic structure:</p>

<pre><code>&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;October&lt;/th&gt;
      &lt;th&gt;Total&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Item 1&lt;/td&gt;
      &lt;td&gt;500&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Item 2&lt;/td&gt;
      &lt;td&gt;1000&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Item 3&lt;/td&gt;
      &lt;td&gt;1400&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th&gt;November&lt;/th&gt;
      &lt;th&gt;Total&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Item 1&lt;/td&gt;
      &lt;td&gt;800&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Item 2&lt;/td&gt;
      &lt;td&gt;400&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Item 3&lt;/td&gt;
      &lt;td&gt;200&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  ... a &lt;tbody&gt; for all 12 months ...
&lt;/table&gt;
</code></pre>

<p>And the following JQuery call:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(function () {
        $("table &gt; tbody &gt; tr:even").addClass("alternate-row");
    });
&lt;/script&gt;
</code></pre>

<p>But what happens is JQuery treats the <strong>entire table</strong> as one logical group and applies the alternate-row class to every odd row <em>regardless of TBODY</em> location. </p>

<p>In other words, what I want is:</p>

<pre><code>October (normal color)
  Item #1 (normal color)
  Item #2 (alt color)
  Item #3 (normal color)
November (normal color)
  Item #1 (normal color)
  Item #2 (alt color)
  Item #3 (normal color)
... etc
</code></pre>

<p>Instead what I'm getting with the above JQuery is:</p>

<pre><code>October (alt color)
  Item #1 (normal color)
  Item #2 (alt color)
  Item #3 (normal color)
November (alt color)
  Item #1 (normal color)
  Item #2 (alt color)
  Item #3 (normal color)
... etc
</code></pre>

<p>In other words, it doesn't recognize the TBODY selector for some reason. What did I do wrong?</p>

<p>Thanks.</p>
