Automatic Coloured Rows

General

Tired of adding even and odd classes to your tables to distinguish the rows? This script will do it for you automatically. You can even use it with lists!

Browsers	Hits	Percent
Mozilla Firefox	15772	73%
Internet Explorer 6	4581	21.2%
Mozilla	442	2%
Opera	122	0.5%
Safari	100	0.4%
Netscape	99	0.4%

Notes

Created by: Anton Peck
Web Site: http://antonpeck.com/
Posted: May 30, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: autoRows.js

/* To use with lists, just change
  document.getElementsByTagName('tr');
to
  document.getElementsByTagName('li');
*/

window.onload = colorRows;
function colorRows() {
  var myTR = document.getElementsByTagName('tr');
  for (var i=0;i<myTR.length;i++) {
    if (i%2) {
      myTR[i].className = 'rowTint';
    }
  }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.rowTint {
  background-color: #ddd;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="autoRows.js"></script>

Body

Paste this code into the BODY section of your HTML document


<table align="center">
  <thead>
    <tr>
    <th>Browsers</th>
    <th>Hits</th>
    <th>Percent</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mozilla Firefox</td>
      <td>15772</td>
      <td>73%</td>
    </tr>
    <tr>
      <td>Internet Explorer 6</td>
      <td>4581</td>
      <td>21.2%</td>
    </tr>
    <tr>
      <td>Mozilla</td>
      <td>442</td>
      <td>2%</td>
    </tr>
    <tr>
      <td>Opera</td>
      <td>122</td>
      <td>0.5%</td>
    </tr>
    <tr>
      <td>Safari</td>
      <td>100</td>
      <td>0.4%</td>
    </tr>
    <tr>
      <td>Netscape</td>
      <td>99</td>
      <td>0.4%</td>
    </tr>
  </tbody>
</table>

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

General

Notes

Source Code

External file

CSS

Head

Body

Leave a Response

Attention JavaScript Coders

Go Deeper