Table Row Striping

Download the most recent version from the scripts page.

To set up script:

There are two ways to set up the script. You can either use an id for a specific table, and call the function for each table; or if there are multiple tables on the same page, you can pick tables by assigning the same class to all of them and calling stripeClass() as described at the end*.

  1. Create a table, and assign an id to it*.
    <table id="testTable">
  2. Attach the script 'rowStripe.js' as a head script in the document.
  3. Create styles for the classes 'oddrow' and 'evenrow' for odd and even rows, respectively. The stylesheet 'rowStripe.css' is used on this example page with the styles:
    /* odd rows */
    .oddrow {background-color: inherit
    /* even rows */
    .evenrow {background-color: #eef
  4. At the end of the document, call the row striping script with the id of the table as the first argument. You will need to add a separate call to the script for each table that needs to be striped:
    <script type='text/javascript'>stripe("testTable")</script>
  5. If you don't add class names to the call, the script will use default class names 'oddrow' and 'evenrow'. To use different classes, add the class names in quotes, separated by commas:
  6. Table rows with a class assigned in the html, or a color assigned, will be skipped by the script (ie. it will not assign a color to that row, and will not count that row as an odd or even row). Assigning a color or class to an individual cell does not affect the script.
  7. *In order to stripe multiple tables on one page by assigning a class, follow the steps above, but change them as follows:
    1. Assign the same class to all tables that will be striped.
      <table class="stripedtables">
    2. At the end of the document, call the stripeClass() script with the class name of the tables that should be striped as the first argument:
      <script type='text/javascript'>stripeClass("stripedtables")</script>
    3. Some feel it is better to use the id method if possible, as the class method takes more processing by the users browser, and so is fractionally slower.

Known Issues

Does not work in Netscape 4.77 or IE4.5 Mac
No stripes are added to the table in these old browsers.

Sample Table

head rowOnse dolendit iliquat.
second rowSectem nullum erat eliquatum.
third row
fourth row has a color assignednote that this row is skipped
fifth rowthis cell has a color asigned
sixth rowwhich has no effect on striping
seventh rowetc
eighth rowetc
ninth row has class assignednote that this row is skipped