I have a table and I am highlighting alternate columns in the table using jquery

$("table.Table22 tr td:nth-child(even)").css("background","blue");

However I have another <table> inside a <tr> as the last row. How can I avoid highlighting columns of tables that are inside <tr> ?

I have a table and I am highlighting alternate columns in the table using jquery

$("table.Table22 tr td:nth-child(even)").css("background","blue");

However I have another <table> inside a <tr> as the last row. How can I avoid highlighting columns of tables that are inside <tr> ?

• javascript
• jquery

• Isn't td:even sufficient rather than using nth-child? – cletus Commented Jan 30, 2009 at 11:03

6 Answers 6

Qualify it with the > descendant selector:

$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");

You need the tbody qualifier too, as browsers automatically insert a tbody whether you have it in your markup or not.

Edit: woops. Thanks Annan.

Edit 2: stressed tbody.

Untested but perhaps: http://docs.jquery./Traversing/not#expr

$("table.Table22 tr td:nth-child(even)").not("table.Table22 tr td table").css("background","blue");

Here is some code I used to do nested checkbox highlighting within a table. I needed to be able to do a "check all/uncheck all" but only within at a single level within the nesting; that is, I didn't want child elements getting selected as well.

var parentTable = $(this).parents("table:first");
var exclusions = parentTable.find("table :checkbox.select");
var checkboxes = parentTable.find(":checkbox.select").not(exclusions);

I'd get the first table above the current one I was in, get all the checkboxes below this newly found parent table, then exclude them from the plete list of checkboxes I could find. Basically, I was finding every checkbox, but then excluding any child checkboxes I found.

The same could be adapted in your case; replace the checkbox selection with columns instead.

Why not to use the advantages of html ?

Instead of

<table>
  <tr>
    <td>
    ...
    </td>
  </tr>
</table>

Try

<table>
  <tfoot>
    <tr>
       <td>
       ...
       </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
      ...
      </td>
    </tr>
  </tbody>
</table>

You can use the <thead> tag too to manipulate headers.

And now you can call the selector on

$("table.Table22 tbody tr td:nth-child(even)").css("background","blue")

Did you test the following?

$("table.Table22 tr td:nth-child(even):not(:last-child)").css("background","blue")

This page defines a nice function for selecting a column http://programanddesign./js/jquery-select-table-column-or-row/