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>

I don't want to include the jquery library. was hoping for pure javascript — JokerMartini, Sep 22 '15 at 14:32
If you wrote both scripts, what's the difficulty in changing the table's content? — Scott, Sep 22 '15 at 14:36
@JokerMartini Can you rephrase the question, because it's not clear that's what you're after. — Mr Lister, Sep 22 '15 at 14:36
You want to make it much harder for yourself on purpose? I would recommend you try jQuery instead of wasting so much time working out how to do tricky things the vanilla way. Its footprint is tiny. Its usefulness is immense. — Popnoodles, Sep 22 '15 at 14:41
could someone convert the jsfiddle using javascript to jquery? — JokerMartini, Sep 22 '15 at 14:55
Like this http://jsfiddle.net/MrLister/gprkL006/4/ but that doesn't work on Chrome, for some reason. (Chrome complains that querySelectorAll is not a function, although I'm really not using _that_ old a version.) Maybe someone more familiar with Chrome can take a look? — Mr Lister, Sep 22 '15 at 15:08
@JokerMartini I'm not sure what you mean by "convert javascript to jquery". Why would that be needed? — Mr Lister, Sep 22 '15 at 15:09
id rather take my original https://jsfiddle.net/JokerMartini/ctq3w7sj/ and convert it to use jquery so it's not raw javascript. — JokerMartini, Sep 22 '15 at 15:10
Duplicate of http://stackoverflow.com/questions/1553571/html-hover-table-column — CDelaney, Sep 22 '15 at 15:29

score 0 · Answer 1 · answered Sep 22 '15 at 15:10

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/

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

1 Answers1