Highlighting columns in a table with jQuery

Question

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> ?

Answer 1

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

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

Answer 2

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.

Answer 3

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 complete 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.

Answer 4

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")

Answer 5

How can I do this without using tbody? It does not get generated over here and I cannot generate it either since it is a custom table.

Answer 6

Did you test the following?

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