|
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,CSP | Sql server |
| Visual Basic | Excel/Powerpoint VBA |
| UML | Database Design |
| Software engineering | and many more! |
<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>
|
