More Efficient Way Of Changing Colors Per Row?

[JustForWebmasters]

Hey all,

I just read "JavaScript 101 - Part 1," and had a question about the specific part linked to above:

Is there a more efficient way of switching colors every row other than calling it every time you want to start a new row? Also, how can the row number be increased each time if the variable rownumber is only increased by one within the second half of the function? What if the row is even? Is the number not increased?

I'm a newbie at JavaScript, so please provide code and explanation.

Code can be found here: http://www.webmasterbase.com/example...ablecolour.htm

Thanks,
-Corbb

[Andrew-J2000]

heres something which works nicely. Hopefully the comments, which i added should help you

<table border="1" cellpadding="2" cellspacing="0" id="stripe">
  <tr>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
    <th>header 4</th>
    <th>header 5</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
  </tr>
</table>

<script type="text/javascript">

  var r = document.getElementById('stripe').childNodes[0].childNodes;
  //        get element table(by id stripe). get element tbody(by child).  get children of tbody(tr tags)

  var len = r.length // - total number of tr tags belonging to the tbody tag

  for (i=0;i<len;i++) //counts upwards to the total of len (tr tags)
  {
    (i%2 == 0)?null:r[i].style.backgroundColor='orange';

    // % means modulus, gets the remainder of dividing a integer
    // if (i%2 == 0)  null else r[i].style.backgroundColor='orange';
  }
</script> 

[JustForWebmasters]

Andrew,

Thanks a lot!

-Corbb