The follwing code will automatically draw colours to the table. The css
is defined and the body onload function calls the alternate function
which gives alternate colours to the table...
Hope this will be useful to you!
<html>
<head>
<title>EXERCI SE 2</title>
<script language="javas cript">
function alternate(id)
{
if(document.get ElementsByTagNa me)
{
var table = document.getEle mentById(id);
var rows = table.getElemen tsByTagName("tr ");
for(i = 0; i < rows.length; i++)
{
if(i % 2 == 1)
rows[i].className = "even";
else
rows[i].className = "odd";
}
}
var tableid = document.getEle mentsByTagName( "table");
}
</script>
<style>
..odd
{
background-color: white;
}
..even {
background-color: pink;
}
</style>
</head>
<body onload="alterna te('TableID')">
<table border="1" id="TableID" class="sort-table">
<thead>
<tr>
<td><b>Column 1</b></td>
<td><b>Column 2</b></td>
<td><b>Column 3</b></td>
</tr>
</thead>
<tr>
<td>1</td>
<td>one</td>
<td>This is a test code</td>
</tr>
<tr>
<td>2</td>
<td>two</td>
<td>This will work</td>
</tr>
<tr>
<td>3</td>
<td>three</td>
<td>This will automaically</td>
</tr>
<tr>
<td>4</td>
<td>four</td>
<td>give color to the table</td>
</tr>
<tr>
<td>5</td>
<td>five</td>
<td>alternative ly using a css</td>
</tr>
<tr>
<td>6</td>
<td>six</td>
<td>using the body onload </td>
</tr>
<tr>
<td>7</td>
<td>seven</td>
<td>function</td>
</tr>
</table>
</body>
</html>
