How to highlight a column in html table on click using js or jquery?

Question

I am trying to implement a javascript which will highlight the column in an html table on click.As the below working example for row highlight i tried to use the same with t

Answer 1

A fork Fisnik Tahiri solution to support also the tr selection (based on css or jquery if you preferir)

css:

.selected{ background-color: #ace; }
tr:hover{ background-color: #ace; }

Js:

$('td').on('mouseenter', function() {
    var $currentTable = $(this).closest('table');
    //var $row = $(this).closest('tr');
    var index = $(this).index();

    //clean
    $currentTable.find('td').removeClass('selected');


    //select row if you want use js
    //$currentTable.find('tr').removeClass('selected');
    //$row.addClass('selected');


    //select column
    $currentTable.find('tr').each(function() {
       $(this).find('td').eq(index).addClass('selected');
    });
});

working example