O'Reilly logo

Greasemonkey Hacks by Mark Pilgrim

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Hack #22. Add Stripes to Data Tables

Make tables easier to read by highlighting alternate rows.

Web pages can display tables of data, like a spreadsheet. However, most web publishers don't put a lot of thought into the usability of large tables. Small improvements such as highlighting every other row can make a huge difference in readability. I honestly didn't think such a little detail would matter to me, since I have normal eyesight and don't spend a lot of time poring over reports or spreadsheets online. But the difference is amazing! I can't imagine how I ever lived without this hack.

The Code

This user script runs on all pages. It is relatively straightforward. It gets all the table rows (<tr> elements) and then loops through them to set the background color to #ddd or #fff.

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

	// ==UserScript==
	// @name		Table Stripes
	// @namespace	http://diveintomark.org/projects/greasemonkey/
	// @description shade alternating rows of data tables
	// @include		*
	// ==/UserScript==

	var arTableRows = document.getElementsByTagName('tr');
	var bHighlight = true;
	for (var i = arTableRows.length - 1; i >= 0; i--) {
		var elmRow = arTableRows[i];
		elmRow.style.backgroundColor = bHighlight ? '#ddd' : '#fff';
		elmRow.style.color = '#000';
		bHighlight = !bHighlight;
	}

Running the Hack

Before installing the user script, go to http://www.openbsd.org/3.7_packages/i386.html, which displays a large table of available packages for the Open-BSD operating system, as ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required