Alternate row colors/column colors for any sort of Web view (categorized & uncategorized)

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.

Code

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.