Javascript
Google
Web www.mahipalreddy.com

Applying alternate background colors for Rows of a HTML Table using Javascript code (The example demonstrates Traversing a HTML document and Modifying the attributes of <TD> tag of HTML Table using Javascript) -- A compendious article by Mahipal Padigela

Applying alternate background colors for Rows of a HTML Table using Javascript code

Generally speaking, applying alternate background colors to table rows is a piece of cake if you have only a few rows or you know exactly how many you there are. But think of a situation where you don't know how many rows you are going to have especially when you are generating them automatically. Javascript is quite handy in these situations. Using Javascript DOM(Document Object Model), you can literally access any element of a HTML document. You can add/delete/modify any attribute of elements.

 

My example traverses the HTML document, gets hold of the Table object with id='Table1', then loops through all the rows, retrieves the value of "id" attribute, then does a simple test and applies background color to all the <TD> elements based the result.

 

I'll briefly explain how the code works.
Declare the variables

var myBD,myTbl,myRows,myAttVal;

Assigns the BODY element to myBD variable

myBD=document.getElementsByTagName("body").item(0);

Gets the Table1 from the BODY into myTbl

myTbl=myBD.getElementsByTagName("table").item("Table1");

Gets the rows from the Table into myRows

myRows=myTbl.getElementsByTagName("tr");

Now, the variable myRows is an array(zero based) consisting of all the rows in the table(Table1). So, if you need to access 3rd Row, you would say myRows[2].

Rest of the code is just looping through the Table rows, then cells to set their backgroundColor property based on the value of 'id' attribute of each row.

 

To test this, just copy the code below into a new document and view in browser.

It should look something like this....

www.mahipalreddy.com Free source codes & Articles
on Javascript,ASP,CSPSql server
Visual BasicExcel/Powerpoint VBA
UML Database Design
Software engineering and many more!

Full Code


<html>
<head>
<title>Access HTML Table attributes using Javascript</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function start() 
{
   var myBD,myTbl,myRows,myAttVal;
   myBD=document.getElementsByTagName("body").item(0);
   myTbl=myBD.getElementsByTagName("table").item("Table1");
   myRows=myTbl.getElementsByTagName("tr");
   for(i=0;i<myRows.length;i++) 
   {
	myAttVal=myRows[i].id;

	if (myAttVal>0)
	{
		if(myAttVal % 2 == 0)
		{
      			for(j=0;j<myRows[i].childNodes.length;j++)
			{
 			    myRows[i].childNodes[j].style.backgroundColor = "#e8e8e8";
			}
    	   	}
		else
		{ 
			for(j=0;j<myRows[i].childNodes.length;j++)
			{
 			    myRows[i].childNodes[j].style.backgroundColor = "#BFBFFF";
			}
		}       
	}	
   }

}
//-->
</script>
</head>
<body onLoad="start()">
<table id ="Table1" width="75%" border="0" cellspacing="1" cellpadding="1">
  <tr id="1"><td>www.mahipalreddy.com</td> <td>Free source codes, Articles and Q&A  </td></tr>
  <tr id="2"><td>on Javascript,ASP,CSP</td><td>Sql server</td></tr>
  <tr id="3"><td>Visual Basic</td><td>Excel/Powerpoint VBA</td></tr>
  <tr id="4"><td>UML</td><td>Database Design</td></tr>
  <tr id="5"><td>Software engineering/SAD</td><td>and many more!</td></tr>
</table>
</body>
</html>

Top

www.mahipalreddy.com
Terms and Conditions of Use
Copyright 2004 - 2006 Mahipal Padigela. All rights reserved.