SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to give table alternating row colors??

    I read this article: http://articles.sitepoint.com/article/javascript-101-2

    I want to Combine this example with the example given in Part 1 to give this table of revenues alternating row colors!

    Here are my combining codes:
    It is quite clear there must be something with them because I can't see the expected result after running. Help me find that mistake. Thank you.


    <html>
    <head>

    </head>



    <body>


    <script type="text/javascript">
    <!--
    var months = new Array(12);
    months[0] = "January";
    months[1] = "February";
    months[2] = "March";
    months[3] = "April";
    months[4] = "March";
    months[5] = "June";
    months[6] = "July";
    months[7] = "August";
    months[8] = "September";
    months[9] = "October";
    months[10] = "November";
    months[11] = "December";

    var revenues = new Array(12233,43232,321445,23214,54546,342342,3425435,23423,65677,34223,54353,234233);
    -->
    </script>



    <script type="text/javascript">
    var color1 = "#6691BC";
    var color2 = "#769DC5";
    var rownumber=1;


    function tablerow() {

    var currentcolor;

    if ( rownumber % 2 == 0 ) {
    currentcolor=color1;
    else {
    currentcolor=color2;
    }
    }
    document.write("<tr bgcolor="+currentcolor+">");
    rownumber=rownumber+1;
    }
    </script>


    <table border="5">
    <tr>
    <th>Month</th>
    <th>Revenue(thousands of $)</th>
    </tr>


    <script type="text/javascript">

    </script>


    <script type="text/javascript">
    for(i=0;i<months.length;i++){

    tablerow();
    document.write("<td>"+months[i]+"</td>");
    document.write("<td>"+revenues[i]+"</td></tr>");
    }
    </script>

    </table>



    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try

    Code:
    <html>
    <head>
    
    
    <script type="text/javascript">
    <!--
       var months = new Array(12);
       months[0] = "January";
       months[1] = "February";
       months[2] = "March";
       months[3] = "April";
       months[4] = "March";
       months[5] = "June";
       months[6] = "July";
       months[7] = "August";
       months[8] = "September";
       months[9] = "October";
       months[10] = "November";
       months[11] = "December";
    
       var revenues = new Array(12233,43232,321445,23214,54546,342342,3425435,23423,65677,34223,54353,234233);
    
       var color1 = "#6691BC";
       var color2 = "#769DC5";
       var rownumber=true;
    
    
    function tablerow(i) {
    
       var currentcolor;
    
       currentcolor= rownumber ? color1 : color2;
       document.write("<tr bgcolor="+currentcolor+"><td>"+months[i]+"</td><td>"+revenues[i]+"</td></tr>");
       rownumber=!rownumber
    }
    // -->
    </script>
    
    </head>
    
    
    
    <body>
    
    
    <table border="5">
    <tr>
    <th>Month</th>
    <th>Revenue(thousands of $)</th>
    </tr>
    <script type="text/javascript">
    <!-- 
       for(i=0;i<months.length;i++){
          tablerow(i);
       }
    // -->
    </script>
    
    </table>
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •