Alternating Table Background Colour

Discussion in 'Javascript' started by Alistair Birch, Oct 27, 2003.

  1. Hi

    I want rows of a table to appear in alternating background colours. Having looked around the web I can't find any solution apart from waiting for the next version of CSS, so I tried building one myself, but I need some help to finish it.

    I use the getAttribute('rowIndex') to return the position of a row within the table and apply modulo 2 to return a 0 or 1 indicating an even or odd row number, from which I apply the alternating background colours (in this case garish red and yellow, just in case any of you were feeling sleepy).

    My problem is how I can apply these colours to the table. The nearest I have been able to get is onclick - but of course the background colour only gets applied when the user clicks on the table. Obviously what I really need is an "onload" event but I can't find anything like this which works with the TR element.

    Does anyone have any suggestions? Or maybe I am going in completely the wrong direction.

    Yours

    Alistair Birch
    Albany, Western Australia

    Best attempt so far (using onclick, so you'll have to click on each row to see the colour, but it works otherwise):

    -----------------------don't cut here you'll ruin your monitor------------------------------------------------
    <table border="1">
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>1</td>
    </tr>
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>2</td>
    </tr>
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>3</td>
    </tr>
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>4</td>
    </tr>
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>5</td>
    </tr>
    </table>
     
    Alistair Birch, Oct 27, 2003
    #1
    1. Advertising

  2. Alistair Birch

    Oz Guest

    Generally to keep my script simple I only apply the onload event to the document as a whole and not individual elements. Here is a simple document onload implementation that accomplishes your goal:


    <html>
    <head>
    <script language="javascript">
    function init(){
    var table = document.getElementById("table");
    var rows = table.tBodies[0].childNodes;
    for (var i=0;i<rows.length;i++) {
    rows.style.backgroundColor = (i%2 == 0) ? "red" : "yellow";
    }
    }
    </script>
    </head>
    <body onload="init()">
    <table border="1" id="table">
    <tr>
    <td>1</td>
    </tr>
    <tr>
    <td>2</td>
    </tr>
    <tr>
    <td>3</td>
    </tr>
    <tr>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    </tr>
    </table>
    </body>
    </html>




    "Alistair Birch" <alistairb at fpc wa gov au> wrote in message news:3f9cf477$...
    Hi

    I want rows of a table to appear in alternating background colours. Having looked around the web I can't find any solution apart from waiting for the next version of CSS, so I tried building one myself, but I need some help to finish it.

    I use the getAttribute('rowIndex') to return the position of a row within the table and apply modulo 2 to return a 0 or 1 indicating an even or odd row number, from which I apply the alternating background colours (in this case garish red and yellow, just in case any of you were feeling sleepy).

    My problem is how I can apply these colours to the table. The nearest I have been able to get is onclick - but of course the background colour only gets applied when the user clicks on the table. Obviously what I really need is an "onload" event but I can't find anything like this which works with the TR element.

    Does anyone have any suggestions? Or maybe I am going in completely the wrong direction.

    Yours

    Alistair Birch
    Albany, Western Australia

    Best attempt so far (using onclick, so you'll have to click on each row to see the colour, but it works otherwise):

    -----------------------don't cut here you'll ruin your monitor------------------------------------------------
    <table border="1">
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>1</td>
    </tr>
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>2</td>
    </tr>
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>3</td>
    </tr>
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>4</td>
    </tr>
    <tr onclick="style.backgroundColor=((this.getAttribute('rowIndex')%2)==0?'red':'yellow')">
    <td>5</td>
    </tr>
    </table>
     
    Oz, Oct 28, 2003
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. fig000
    Replies:
    0
    Views:
    4,561
    fig000
    Sep 6, 2004
  2. Newton

    Alternating table background colors

    Newton, Jun 12, 2004, in forum: ASP General
    Replies:
    1
    Views:
    146
    Roji. P. Thomas
    Jun 12, 2004
  3. NeoPhreak
    Replies:
    3
    Views:
    139
    NeoPhreak
    Aug 5, 2003
  4. Dj Frenzy
    Replies:
    3
    Views:
    318
    Robert
    Feb 10, 2004
  5. jodleren
    Replies:
    2
    Views:
    204
    Thomas 'PointedEars' Lahn
    Jan 12, 2008
Loading...

Share This Page