Pure Javascript table column hover effect?

Question

I need a pure Javascript (no jQuery) hover effect for HTML table columns.

I found this which supposedly contains a fix for Firefox yet it still looks broken to me.

I found this which works only for the first column.

Unfortunately, my Javascript skills are amateur at best, so my attempts to modify either of these turned out to be fruitless.

Is this possible? Any suggestions would be appreciated.

jQuery is written in pure JavaScript, so does that count? :-p — Wiseguy, Aug 15 '12 at 18:54
Could you use javascript to add the css :hover attribute, or is that a no no as well? — thatidiotguy, Aug 15 '12 at 18:57
@thatidiotguy, I don't see why that would be a problem, so long as it worked! — carmenism, Aug 15 '12 at 18:58
@IsaacGonzalez, as far as I know you can only hover on rows and cells, but not columns. — carmenism, Aug 15 '12 at 18:59

canon · Accepted Answer · 2019-11-25T21:12:14.810

7

Here's a column-based approach. When the mouse enters/leaves a cell, find the corresponding <col/> by index and apply/remove the desired class:

(() => {
  const myTable = document.getElementById("myTable");
  const cols = myTable.querySelectorAll("col");
  const events = {
    mouseover: e => {
      const t = e.target.closest("td");
      if (t) {
        const cellIndex = t.cellIndex;
        for (let i = 0, n = cols.length; i < n; i++) {
          cols[i].classList[i === cellIndex ? "add" : "remove"]("hovered");
        }
      }
    },
    mouseout: e => {
      const t = e.target;
      if (t.nodeName === "TD" && !t.contains(e.relatedTarget)) {
        cols[t.cellIndex].classList.remove("hovered");
      }
    }
  };
  for (let event in events) {
    myTable.addEventListener(event, events[event]);
  }
})();

.hovered {
  background-color: #FF0000;
}

<table id="myTable" cellspacing="0">
  <col />
  <col />
  <col />
  <tbody>
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col2
        <span>nested</span>
      </td>
      <td>Col3</td>
    </tr>
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
    </tr>
  </tbody>
</table>

See also:

Element.classList
Node.Contains()
Element.Closest()

edited Nov 25 '19 at 21:12

answered Aug 15 '12 at 19:25

canon

40,609
10
73
97

This is so close, but it seems that the last column I hover over retains the background color when I move my mouse off of the table entirely. – carmenism Aug 15 '12 at 19:41
I'm sorry; I wasn't trying to be ungrateful! I didn't realize I needed to specify that in my question. Thanks for providing your function. – carmenism Aug 15 '12 at 19:49
1

@vulpix, pfft... no worries. Updated. – canon Aug 15 '12 at 19:51
Your diligence is much appreciated! Thank you so much. If you don't mind me asking, do you have any clue why the hover disappears when I mouse over an image in my table? http://jsfiddle.net/RmrSJ/ – carmenism Aug 15 '12 at 20:28
1

Because the `td` sends a `mouseout` event when you hover over one of its children, i.e.: your nested image. You can check whether the `e.toElement` is a descendant of the `td` and, if so, stop propagation. – canon Aug 15 '12 at 20:53
In case anyone is wondering, here is my solution to the nested element problem: http://jsfiddle.net/PJ5QT/ – carmenism Aug 15 '12 at 21:39

katspaugh · Answer 2 · 2012-08-15T19:51:26.247

Here are your codes (+ demo):

var HOVER_CLASS = 'hovered';
var hovered;

table.addEventListener('mouseover', function (e) {
    if (e.target.tagName.toLowerCase() == 'td') {
        var index = e.target.cellIndex;

        hovered && hovered.forEach(function (cell) {
            cell.classList.remove(HOVER_CLASS);
        });

        hovered = Array.prototype.map.call(
            table.rows,
            function (row) {
                var i = index;
                while (!cell && i >= 0) {
                    var cell = row.cells[i];
                    i -= 1;
                }
                return cell;
            }
        );

        hovered.forEach(function (cell) {
            cell.classList.add(HOVER_CLASS);
        });
    }
}, true);

table.addEventListener('mouseout', function (e) {
    hovered && hovered.forEach(function (cell) {
        cell.classList.remove(HOVER_CLASS);
    });
    hovered = null;
}, true);

Works nicely. I'm trying to get it to work in my code now. Thanks! — carmenism, Aug 15 '12 at 19:43
@vulpix, not at all. You might want to work around the [`classList`](https://developer.mozilla.org/en-US/docs/DOM/element.classList) and [`map`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/map)/[`forEach`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach) parts for older browsers. — katspaugh, Aug 15 '12 at 19:47

score 1 · Answer 3 · answered Aug 15 '12 at 18:58

Best method I can think of is to give each <td> a class name that identifies the column it's in. i.e. "col1, col2, etc"

Then you can use the document.getElementsByClassName("colX") function to get an array of those <td>s, loop through the array and modify the style. Warning, this may not work in older browsers that don't have a getElementsByClassName function, but there are workarounds you can find easily for that. The best of which would be to use jQuery, not sure why you're against it.

score 0 · Answer 4 · answered Mar 27 '19 at 21:39

You create a class in css

.HoverTabla > tbody > tr:hover,
.HoverTabla > tbody > tr:focus { 
    background-color: #42C6F7;
}

and then you call it from the table in the html

<table class="table HoverTabla" id="tbl_Plan">

            <thead>
                <tr>
                    <th>Tipo de plan</th>
                    <th>Tiempo en días</th>
                    <th>Max. Usuario</th>
                    <th>Max. Capacidad</th>
                    <th>Max. Casos</th>
                    <th>Valor plan</th>
                    <th></th>
                </tr>
            </thead>
 </table>

Daniel_I_Am · Answer 5 · 2019-11-25T21:55:06.637

CSS-only answer I found after a little bit of googling: https://css-tricks.com/simple-css-row-column-highlighting/

Each cell (<td>) in the table is given some padding through pseudo elements, which is used to create the hover effect. To make sure the hover effect doesn't extend further than the table itself, an overflow: hidden is used.

The sub-title in the article summarizes it all: "The trick is using huge pseudo elements on the <td>s, hidden by the table overflow"

score -1 · Answer 6 · answered Aug 15 '12 at 18:59

-1

Try

<td onMouseOver="this.bgColor='yellow';" onMouseOut="this.bgColor='white';">

answered Aug 15 '12 at 18:59

Conrad Lotz

8,200
3
23
27

2

I think (s)he wants to highlight the whole column, not just the cell. – invertedSpear Aug 15 '12 at 18:59

score -2 · Answer 7 · answered Aug 15 '12 at 19:00

-2

This will work, no javascript needed. So it should work even when people turn javascript off.

Jfiddle: http://jsfiddle.net/vJacZ/

Html:

<table>
<tr>
    <td class="column1">
        Column1
    </td>
    <td class="column2">
        Column2
    </td>
</tr>
</table>

Css:

.column1{
    color:black;
}
.column1:hover{
    color:red;
}
.column2{
    color:black;
}
.column2:hover{
    color:green;
}

answered Aug 15 '12 at 19:00

PRNDL Development Studios

3,270
2
35
50

This only works for cells, not columns. Add a second row and you'll see what I mean. – carmenism Aug 15 '12 at 19:01
Make each cell in the column that class. HTML tables are defined in rows, not columns AFAIK – PRNDL Development Studios Aug 15 '12 at 19:02
1

Correct, tables are defined in rows, which is why you would need to use js to capture each cell in the column in order to manipulate them all. – invertedSpear Aug 15 '12 at 19:05
Exactly, @invertedSpear, our answers are exactly the same, except mine does not use JS. You need to add the class to the cell either way. – PRNDL Development Studios Aug 15 '12 at 19:06
2

yes, you do need to add the class to each cell in the column, but without JS you cannot manipulate the bgcolor or every cell in the column, which is what OP wants to do. – invertedSpear Aug 15 '12 at 19:08

Pure Javascript table column hover effect?

7 Answers7