Highlight hovered table row and column

A script that changes style on the currently hovered table row, column and cell. Meant as a visual aid in large HTML tables.

Browser support

Should work in IE9 and most other newer browsers.

Demo

Hover over a cell, and all cells in the same row and column should be highlighted.

Example table (size: 5x10, 10x20, 15x30)
Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 Column 8 Column 9 Column 10
Row 1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 3 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 4 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 5 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 6 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 7 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 8 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 9 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 10 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 11 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 12 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 13 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 14 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 15 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 16 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 17 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 18 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 19 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Row 20 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell

How it works

The script adds a temporary CLASS name to the currently hovered table cell, another CLASS to the row, and a third to each cell in the same column.

Installation

To enable highlighting on a table, add the custom attribute data-highlightable-table. Multiple tables can be highlighted on the same page.

Limitations

published: Nov 12, 2015
last modified: Jan 26, 2017