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.

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

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.

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

Will not work if COLSPAN or ROWSPAN is used in a table.
No highlighting occurs while the cursor moves over the space between table cells, resulting in flickering. To remove this space, use CSS border-spacing: 0; or border-collapse: collapse;.
CSS3 transitions may slow down the script on large tables.

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