Alternate row coloring of tables -the next level

• Prashul Kumar
• Published: 10 Feb 2003

Domino throws views in tables. Ravi Heerachand has submitted a tip on alternate row coloring. This tip takes you one step ahead...On mouse over the row color changes...to open the document you just double click on the table row. Hope this helps someone. You can apply this script out of the box for any views that are thrown by Domino. Comments and suggestions are welcome. Cheers! Prashul

var e;
//the following are the variables that control 
the height and widht
//change this as u need...can also convert ot 
global vars by declaring in jsheader and  initiliazing 
onLoad
//IMPORTANT: you have to pass the tableIndex when 
u call transformView...eg: transformView(4) etc.
docWinHeight=400;
docWinWidth=400;
/**
This function provides the alternate row coloring
 for the table generated by the view.
An event handler is also present to change the 
row color when mouse over happens
Another event handler takes care of opening the 
document in a window whenever the row is clicked
*/
function transformView(tableIndex) 
{
 var tableElements = document.getElementsByTagName('table') ;
 var table = tableElements[tableIndex] ;
  table.width = '850' ; // spreads out the table if you want it to
 table.cellSpacing = '1' ; // removes space between cells
 table.className="tabTable"

 headers = table.getElementsByTagName("th") ;
 for( i = 0; i < headers.length; i++) 
  {
   headers[i].bgColor = '0060A0' ;
  }
 //get the rows of the table we are transforming
 rows = table.getElementsByTagName("tr") ;
 var counter = 0
 //assign the title and event handlers and an id to the row
//i is set to one as the first row is th tags
 for( i = 1; i < rows.length; i++) 
 {
  rows[i].bgColor = (i % 2 ? 'FFFFFF' : 'BAD1E9') ;
  rows[i].title="Row "+i+" --> Double click to open the document"
  rows[i].id="ROW"+i
  rows[i].onmouseover = rows[i].onmouseout = showColor;

  anchors=rows[i].getElementsByTagName("A");
  if(anchors.length>0)
  {
   rows[i].ondblclick=openDblClik;
  }//end if
 }
}

function openDblClik(evt)
{
 var el = this;
 var type = "string" == typeof(window.event.type) ? 
window.event.type : evt.type;
 //var tgt = "string" == typeof(event.target) ? 
event.target : evt.target;

 if (type == "dblclick")
  {
   row=window.event.srcElement;
   rowClicked=window.event.srcElement.parentNode.id;
   
   var trTags=document.getElementsByTagName("TR");
   for (intTR=0;intTR<trTags.length;intTR++)
   {
   
    if (rowClicked!="" && rowClicked==trTags[intTR].id)
    {
     anchors=trTags[intTR].getElementsByTagName("A");
     anchor4use=findHref(anchors) //if there is an href
 returns the href else returns false
     if(anchor4use)
     {
      //alert(anchors[0].href);
      if (isLinkCategory(anchor4use.href))
      {
       //  alert("1")
       location.href=anchor4use.href
      }
      else
      {
       //alert("winHeight"+docWinHeight)
     alert("set ur window.open params")   
window.open("GIVE YOUR PARAMS HERE")       }//ending
 the category check
     }
    }
  else
  {
   //alert("2");
  var srcObj
  srcObj=window.event.srcElement;
  while (srcObj.nodeName!="TD")
  {
   //alert(srcObj.nodeName)
   srcObj=srcObj.parentNode
  }//endwhile
  rowClicked=srcObj.parentNode.id;
 
  if (rowClicked==trTags[intTR].id)
  {
   anchors=trTags[intTR].getElementsByTagName("A");
   anchor4use=findHref(anchors) //if there is an
 href returns the href