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

Solution 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 tbodywhether you have it in your markup or not.

Edit: woops. Thanks Annan.

Edit 2: stressed tbody.

Solution 2:

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.

Solution 3:

Why not to use the advantages of html ?

Baca Juga

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

Solution 4:

Did you test the following?

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

Solution 5:

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

JavaScript Sample