Hack 22. Add Stripes to Data Tables

 < Day Day Up > 

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.

3.3.1. 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; } 

3.3.2. 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 shown in Figure 3-3.

Figure 3-3. OpenBSD packages


Now install the user script (Tools Install This User Script), and refresh http://www.openbsd.org/3.7_packages/i386.html. You will see every other row is now slightly shaded, as shown in Figure 3-4. This makes it much easier to read across the table and associate the package name with its description.

Figure 3-4. OpenBSD packages, striped


3.3.3. Hacking the Hack

Currently, this hack shades alternating rows in any table. But many web pages use tables for layout, and this hack could seriously alter their display in unexpected and bizarre ways. To get around this, we can use XPath to operate only on tables that include table headers (<th> elements). Table headers are rarely used in layout tables; usually, you find them only in tables that actually display tabular data.

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

 // ==UserScript== // @name Table Stripes // @namespace http://diveintomark.org/projects/greasemonkey/ // @description shade alternating rows of data tables // @include * // ==/UserScript== var snapTableRows = document.evaluate("//table//th/ancestor::table//tr", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); var bHighlight = true; for (var i = snapTableRows.snapshotLength - 1; i >= 0; i--) { var elmRow = snapTableRows.snapshotItem(i); elmRow.style.backgroundColor = bHighlight ? '#ddd' : '#fff'; elmRow.style.color = '#000'; bHighlight = !bHighlight; } 

There is another obvious candidate for striping: lists. Simply by taking the original hack and changing the first line of code to search for <li> elements instead of <tr> elements, we can highlight alternating items in ordered and unordered lists.

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

 // ==UserScript== // @name List Stripes // @namespace http://diveintomark.org/projects/greasemonkey/ // @description shade alternating rows of lists // @include * // ==/UserScript== var arListItems = document.getElementsByTagName('li'); var bHighlight = true; for (var i = arListItems.length - 1; i >= 0; i--) { var elmListItem = arListItems[i]; elmListItem.style.backgroundColor = bHighlight ? '#ddd' : '#fff'; elmListItem.style.color = '#000'; bHighlight = !bHighlight; } 

Yahoo! uses lists to display search results, so you can see this effect by searching for something in Yahoo! Web Search, as shown in Figure 3-5.

Every other search result is slightly shaded, which makes it easier to scan the page when you need to look past the first search result.

Figure 3-5. Yahoo! Search results, striped


     < Day Day Up > 


    Greasemonkey Hacks
    Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox
    ISBN: 0596101651
    EAN: 2147483647
    Year: 2005
    Pages: 168
    Authors: Mark Pilgrim

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net