Generating alternating row colors for Web views Tip submitted by David Frahm

Level: Intermediate Works with: Domino 5.0 Updated: 01-Jun-2001

In Notes, you can design a view to have alternating row colors. Unfortunately, the Domino R5 server doesn't automatically support these alternating row colors. Here's a tip that shows you how can add alternating row colors to your R5 Web views. (Note that the Domino Rnext server, now in beta testing, automatically supports alternating row colors for both Notes and Web views.)

On a view template, such as the $$ViewTemplateDefault form, place the following code in the JS Header section:

function transformView() {
var tableElements = document.getElementsByTagName('table') ;
var table = tableElements[tableElements.length - 1] ;
//table.width = '100%' ;
table.cellSpacing = '0' ;

headers = table.getElementsByTagName("th") ;
for( i = 0; i < headers.length; i++) {
headers[i].bgColor = '#cccccc' ;
}

rows = table.getElementsByTagName("tr") ;
var counter = 0
for( i = 0; i < rows.length; i++) {
rows[i].bgColor = (i % 2 ? '#efefef' : '') ;
}

}

Also, you must call the above function by placing the following code into the HTML Body Attributes section:

"onLoad=\"transformView()\""

The result looks like this example, which uses the hex colors CCCCCC (dark gray) and EFEFEF (light gray):



Note that this tip does not work if the view is categorized and has lines per row set to anything other than 1.

SUBMIT YOUR TIPS! We encourage you to send us your tips (You can also click the "Would you like to submit a tip?" graphic below.) Your tips can be anything you've discovered about Notes, Domino, Designer, or the Domino Administrator that you think is interesting, useful, or handy. For ideas, take a look at our tip archives. If we publish your tip, we'll send you your very own Notes.net mug (shown below).