Greasemonkey Hacks

Hack #27. Add Dynamic Highlighting to Tables

Make tables easier to navigate by highlighting the current row.

"Add Stripes to Data Tables" [Hack #22] discusses the benefit of shading alternating rows in tables and lists. This hack is slightly different. It highlights rows in a table as you move your cursor over them. You can install both hacks at the same time. They do not conflict; in fact, they complement each other.

The Code

This user script runs on all pages. It iterates through all the table rows on the page and adds mouseover and mouseout event handlers to each row. On mouseover, it saves the background and foreground colors and then sets the background color to the highlight color (#88eecc, a super-intelligent shade of blue). On mouseout, it restores the original colors.

Save the following user script as tableruler.user.js:

	// ==UserScript==
	// @name		Table Ruler
	// @namespace	http://diveintomark.org/projects/greasemonkey/
	// @description highlight current row in data tables // @include * // ==/UserScript== var arTableRows = document.getElementsByTagName('tr'); for (var i = arTableRows.length - 1; i >= 0; i--) { var elmRow = arTableRows[i]; var sBackgroundColor = elmRow.style.backgroundColor; var sColor = elmRow.style.color; elmRow.addEventListener('mouseover', function() { this.style.backgroundColor = '#88eecc'; this.style.color = '#000'; }, true); elmRow.addEventListener('mouseout', function() { this.style.backgroundColor = sBackgroundColor; this.style.color = sColor; }, ...