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


        

Answer 1

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 2

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 3

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

Answer 4

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 5

Did you test the following?

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

Answer 6

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