Using jQuery I want to highlight columns in table when a TD is hovered

Question

When the user hovers over a cell in a table, I would like to apply a css style class to that column, only while it's being hovered over.

Here is an example using JS i want to use: http://jsfiddle.net/JokerMartini/gprkL006/

Here is the code in which im using to sort the columns. I want to combine the two scripts. However this second script is complex as it was given to be written in raw Javasvcscript. I would like to have this script modified to use jQuery which in return will make it less complex and easier for me to combine the two fiddles.

https://jsfiddle.net/JokerMartini/ctq3w7sj/

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Times</th>
            <th>Count</th>
            <th>Size</th>
            <th>Info</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Mike</td>
            <td>15</td>
            <td>42314</td>
            <td>29</td>
            <td>stuff</td>
        </tr>

        <tr>
            <td>Great</td>
            <td>10</td>
            <td>7558</td>
            <td>43</td>
            <td>info</td>
        </tr>

        <tr>
            <td>Mitch</td>
            <td>20</td>
            <td>7841</td>
            <td>129</td>
            <td>stuff</td>
        </tr>

        <tr>
            <td>Leslie</td>
            <td>25</td>
            <td>16558</td>
            <td>423</td>
            <td>info</td>
        </tr>
    </tbody>
</table>

Answer 1

You can use CSS in order to highlight the column of the hovered cell, but with this solution your td and th must have position: relative.

Code:

td:hover::after, thead th:not(:empty):hover::after {
    content:'';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}
td:hover::after, th:hover::after {
    background-color: #ffa;
}

Demo: https://jsfiddle.net/2frgcea9/