Question

I am trying to exclude nested tables from my table striping (making every other row a different bg color). Here is my code to stripe the table:

$(".stripeTable tbody tr:odd").addClass("stripe");

My question is, how to I prevent the nested table’s odd rows from receiving the class “stripe”?

Here’s the generated code from the browser, I want to remove the class=”stripe” from the nested table.

   <table>
      <tr>
        <td>My Table Cell </td>
      </tr>
      <tr class="stripe">
        <td>
          <table>
            <tr>
              <td>My nested table cell</td>
            </tr>
            <tr class="stripe">
              <td>my nested table cell (remove the stripe!)</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

Answer 1

If only the top-level table has the stripeTable class, just add some child selectors >:

$(".stripeTable > tbody > tr:odd").addClass("stripe");

If the nested tables have the stripeTable class as well, you may need to anchor .stripeTable to another parent element with another child selector:

$(".parent > .stripeTable > tbody > tr:odd").addClass("stripe");