jQuery highlighting selected columns only in a table

Question

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>

Precursor

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() {
  var rows = $('table.tbl tr');  

  rows.children().click(function() {

    rows.children().removeClass('highlight');  
    var index = $(this).prevAll().length;  
    rows.find(':nth-child(' + (index + 1) + ')').addClass('highlight');

  });
});

Voluntarism

I did like the tableHover plugin but actually I'm looking to change the CSS in the selected columns of a table, but I though for the example I would just use highlight. But the plugin will go into my workspace very soon, Thanks :) – Precursor

Thanks this is what I needed. Any chance you could help out on my other question? I have added your code to it as well: #1126989 – Precursor

Plugin works fine, however colspans are not supported - it would complicate it through – Picaroon

btw, rows.find(':nth-child... isn't scoped to just immediate children so if you have a complex set of spans/elements inside of each td it'll also pickup those. You might want to increase the specificity with the immediate child selector like this: '> :nth-child(1)' – Priestcraft

Answer 2

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:

.highlight {
    background-color: yellow; 
 }

     <table id="myTable">
    	   
    	       <colgroup class="highlight"></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	       <colgroup></colgroup>
    	   
    	    <thead>
    	       <tr>
    	           <th>header1</th>
    	           <th>header2</th>
    	           <th>header3</th>
    	           <th>header4</th>
    	           <th>header5</th>
    	       </tr>
    	    </thead>
    	    <tbody>
    	       <tr>
    	           <td>cell a</td>
    	           <td>cell b</td>
    	           <td>cell c</td>
    	           <td>cell d</td>
    	           <td>cell e</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)

Louth

I did like the video and had thought about colgroups but couldn't get them to work in my earlier attempts. Will add that site to my bookmarks, thanks ;) – Precursor

Any chance you could look at my other question? #1126989 – Precursor

Answer 3

Here's what I use for adding a cross-hair affect to my table:

$('tbody td').hover(function() {
    $(this).closest('tr').find('td,th').addClass('highlight');
    var col = $(this).index()+1;
    $(this).closest('table').find('tr :nth-child('+col+')').addClass('highlight');
}, function() {
    $(this).closest('tr').find('td,th').removeClass('highlight');
    var col = $(this).index()+1;
    $(this).closest('table').find('tr :nth-child('+col+')').removeClass('highlight');
});

Seems to run a bit slow on large tables though (the highlighting lags behind).

Caespitose

Answer 4

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; }

Armilda

Answer 5

If you want to support colspan and rowspan, then first you need to build table cell index, ie. matrix that identifies cell positition in every row regardless of the markup. Then you need to track events of all the table cells of interest and calculate their offset in the matrix and the columns that share the vertical index.

The resulting lookup is illustrated in the following animation:

I have written a plugin that triggers an wholly.mouseenter and wholly.mouseleave events for columns. Wholly.

Emlynn

Answer 6

You can use a plugin called wholly. You can read the full tutorial on how to integrate it here http://voidtricks.com/wholly-jquery-plugin/

Ocieock