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.

3.8.1. 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; }, true); } 

3.8.2. Running the Hack

After installing the user script (Tools Install This User Script), go to http://diveintomark.org/csshacks/. This is a table of hacks I devised to hide CSS rules from Safari. It is woefully out of date, but it is a nice example of a table and will serve as a good example here. Move your cursor around the table, and you will see the row beneath your cursor highlighted in blue, as shown in Figure 3-13.

3.8.3. Hacking the Hack

Currently, this hack highlights rows only. That's generally more useful than highlighting columns, and it's definitely easier due to the way HTML table markup is declared. But it can also be useful to highlight the current column. This will lead to a crosshair effect, where both the current row and column are highlighted as you move your cursor around the table.

Figure 3-13. CSS hacks highlighted

HTML tables are laid out as cells within rows (<TD> elements within <tr> elements). There's no such thing as a table column element. To highlight an entire column, we need to highlight each cell in the column. We can use the cellIndex attribute on a table cell to determine which column it's in.

To make this trick perform adequately, we'll need to do a little creative thinking. Rather than iterating through every table cell every time you move the cursor, iterate through all the cells once and build up a cross-reference array that lists which cells are in each column. Then, add a mouseover handler to each cell that gets the column index for that cell and checks the cross-reference array to find all the other cells in the same column. For computer science geeks, this reduces an O(N²) operation to O(N) a huge improvement!

This script interacts badly with tableruler.user.js. Uninstall the Table ruler script from the Manage User Scripts dialog, and then save the following user script as tablecrosshair.user.js:

 // ==UserScript== // @name Table Crosshair // @namespace http://diveintomark.org/projects/greasemonkey/ // @description highlight current row and column in data tables // @include * // ==/UserScript== var arTableRows = document.getElementsByTagName('tr'); var arCellXref = new Array( ); for (var i = arTableRows.length - 1; i >= 0; i--) { var elmRow = arTableRows[i]; elmRow.addEventListener('mouseover', function( ) { this._backgroundColor = this.style.backgroundColor; this._color = this.style.color; this.style.backgroundColor = '#88eecc'; this.style.color = '#000'; }, true); elmRow.addEventListener('mouseout', function( ) { this.style.backgroundColor = this._backgroundColor; this.style.color = this._color; }, true); var arCells = elmRow.getElementsByTagName('td'); for (var j = arCells.length - 1; j >= 0; j--) { var elmCell = arCells[j]; var iCellIndex = elmCell.cellIndex; if (!(iCellIndex in arCellXref)) { arCellXref[iCellIndex] = new Array( ); } arCellXref[iCellIndex].push(elmCell); } for (var j = arCells.length - 1; j >= 0; j--) { var elmCell = arCells[j]; elmCell.addEventListener('mouseover', function( ) { var iThisIndex = this.cellIndex; for (var k = arCellXref[iThisIndex].length - 1; k >= 0; k--) { var elm = arCellXref[iThisIndex][k]; elm.setAttribute('_backgroundColor', elm.style. backgroundColor); elm.setAttribute('_color', elm.style.color); elm.style.backgroundColor = '#88eecc'; elm.style.color = '#000'; } }, true); elmCell.addEventListener('mouseout', function( ) { var iThisIndex = this.cellIndex; for (var k = arCellXref[iThisIndex].length - 1; k >= 0; k--) { var elm = arCellXref[iThisIndex][k]; elm.style.backgroundColor = elm.getAttribute('_ backgroundColor'); elm.style.color = elm.getAttribute('_color'); } }, true); } } 

Now, go back to http://diveintomark.org/csshacks/ and move the cursor around the table. You'll see both the current row and column highlighted, creating a crosshair effect, as shown in Figure 3-14.

Figure 3-14. CSS hacks with crosshair highlighting

This is a great example of how publishing data on the Web can be more usable than printing it on paper. Imagine trying to navigate a printed table while holding two rulers at right angles!