jQuery highlighting selected columns only in a table

Question

Hey all,

I see this post on highlighting even columns but can I highlight only selected columns?

Here is the code they use:

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

But I would like: NOTE: the class="highlight" will be on the selected columns, so if I selected column 3 the class="highlight" would be removed from column 2 and added to column 3. jQuery needs to add the class based on selected column.

<table class="tbl">
    <tr>
        <th class="firstColumn">
            Cell 1:Heading
        </th>
        <th class="highlight">
            Selected column so this should be highlighted
        </th>
        <th>
            Cell 3:Heading
        </th>
        <th>
            Cell 4:Heading
        </th>
        <th>
            Cell 5:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td class="highlight">
            Selected column so this should be highlighted
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            Cell 5:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td class="highlight">
            Selected column so this should be highlighted
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
    </tr>
</table>

Answer 1

You might want to take a look at jQuery tableHover plugin to achieve this. Then use something like this

$('table.tbl').tableHover({
                           colClass: 'hover', 
                           clickClass: 'click', 
                           headCols: true, 
                           footCols: true 
                          });

EDIT:

Something like this?

Working Demo - Click on any cell, to highlight the column

Code from demo -

$(function() {

  $('table.tbl tr').children().click(function() {

    $('table.tbl tr').children().removeClass('highlight'); 
    var index = $(this).parent().children().index(this); 
    $('table.tbl tr').each(function() {
      $(':nth-child(' + (index + 1) + ')' ,this).addClass('highlight');
    });

  });

});

Answer 2

If you create a link in your table headers, you can do something like this:

$("table.tbl th a").click(function() {
   var colnum = $(this).closest("th").prevAll("th").length;

   $(this).closest("table").find("tr td").removeClass("highlight");
   $(this).closest("table").find("tr td:eq(" + colnum + ")").addClass("highlight");
}

That will set all cells below the clicked link to class "highlight".

Of course, you should still set the correct style in your CSS file:

table.tbl tr .highlight {  background-color: blue; }

Answer 3

have you concidered using colgroups instead of adding classes to every cell?

i only recently started to see the power of colgroups myself, and they work like this:

 <table id="myTable">

           <colgroup class="highlight"></colgroup>
           <colgroup></colgroup>
           <colgroup></colgroup>
           <colgroup></colgroup>
           <colgroup></colgroup>

        <thead>
           <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
           </tr>
        </thead>
        <tbody>
           <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
           </tr>
        <tbody>
 <table>

this would render a table with 5 columns, where 1 column has css class to highlight the first col. so actually the only thing you have to do then, add a function to the hover of each cell, to just add the highlighting class to the corresponding colgroup.

there is a complete videoguide you can find right here:table fix header, and row + column highlighting.

*EDITED the answer because it was irrelevant, i read the question wrong, and answered to a totally different matter. (added a correct reply now)