Search code examples
jquerycsshighlightingselected

jQuery highlighting selected columns only in a table


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>

Solution

  • 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');
    
      });
    });