Friday, 3 May 2013

code to create a Stylish Html Table with Rows having Alternate Colours

code to create table with rows having Alternate Colours
/* Author     : Gaurav Pathak 

 * 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