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.
