A script that changes style on the currently hovered table row, column and cell. Meant as a visual aid in large HTML tables.
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.
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 |
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.
border-spacing: 0;
or border-collapse: collapse;
.published: Nov 12, 2015
last modified: Jan 26, 2017