Showing alternate coloured rows on Web

There has been quite a few solutions to produce alternate row colors for a Web view. They all involve writing cluttered HTML in the column headings, treating view contents as HTML, or using agents, etc. But the following solution is purely a javascript function and has nothing to do with Domino view design. Part of this idea was derived from a posting in the notes.net site.



Step 1.) Create a view with few columns(Let it be uncategorized initially).

Step 2.) Embed the view in a form(Display as HTML).

Step 3.) Put the following code in the Onload event of the form.(Or have it as a function in the JS Header and call it in the OnLoad event).


var tableElements = document.body.all.tags("table");
var table = tableElements[tableElements.length-1];
var headlength=rowlength="";
heads = table.getElementsByTagName("th") ;
headlength=heads.length;

// If the view is categorized , use this line, else comment it
//headlength=headlength-1;

for( i = 0; i <headlength; i++)
heads[i].bgColor = '#D2D2D2';

rows = table.getElementsByTagName("tr") ;
for( i = 0; i < rows.length; i++)
{
if(i % 2)
{
// If the view is not categorized , use this line
celllength=rows[i].cells.length;
// If the view is categorized , use this line
//celllength=rows[i].cells.length-1;

for (var c = 0; c < celllength; c++)
rows[i].cells[c].bgColor = '#F4F4F4';
}
else
rows[i].bgColor='';
}

(The code is self explanatory. It gets the table element, changes the background color of the cells. The above code works fine for an uncategorized view.)

Step 4: For a categorized (single or many), uncomment the following lines,

//headlength=headlength-1;
//celllength=rows[i].cells.length-1;

and comment the following line.
//celllength=rows[i].cells.length;

This should work well for a categorized view.

Step 5 : To provide alternate column color effect, modify the for loop given below,

for (var c = 0; c < celllength; c++)
rows[i].cells[c].bgColor = '#F4F4F4';

to,

for (var c = 0; c < celllength; c++)
if (c % 2)
rows[i].cells[c].bgColor = '#F4F4F4';



The above javascript function is fully customizable like,
table.cellspacing='2'
table.cellpadding='2'
and the bgcolor values etc.