/* Author : Gaurav Pathak
*/
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 1; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
/*
Document : alttabcolorsheet
Created on : 26 Feb, 2013, 4:16:31 PM
Author : Gaurav Pathak
Description: Purpose of the stylesheet follows.
*/
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #000000;
border-collapse: collapse;
width:900px;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color:#000000;
background-color:#DBBF6B;
color: #ffffff;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
/* border-color: #a9c6c9;*/
}
.oddrowcolor{
background-color:#ffffff;
}
.evenrowcolor{
background-color:#BCB7B7;
}
window.onload=function()
{
altRows('alternatecolor');// table id should be mention here
}
</script>
Note: The id your are mention in altRows() function must be similar to one used with Table.
for example:-
<table class="altrowstable" id="alternatecolor" border="1">
</table>
* JavaScript code
**/
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 1; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
Stylesheet to used....
/*
Document : alttabcolorsheet
Created on : 26 Feb, 2013, 4:16:31 PM
Author : Gaurav Pathak
Description: Purpose of the stylesheet follows.
*/
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #000000;
border-collapse: collapse;
width:900px;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color:#000000;
background-color:#DBBF6B;
color: #ffffff;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
/* border-color: #a9c6c9;*/
}
.oddrowcolor{
background-color:#ffffff;
}
.evenrowcolor{
background-color:#BCB7B7;
}
paste the below code on the page in which u want alternate colour
<script type="text/javascript">window.onload=function()
{
altRows('alternatecolor');// table id should be mention here
}
</script>
Note: The id your are mention in altRows() function must be similar to one used with Table.
for example:-
<table class="altrowstable" id="alternatecolor" border="1">
</table>
No comments:
Post a Comment