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.

Answer 1

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()