Tricklin

Want to create a table that contains rows of alternating color? This is a little tutorial dedicated to showing you how. I've also added a third color to the mix. This will be used as a highlighting tool when the user mouses over a row. Let's start by having a look at the XHTML and ColdFusion code.
XHTML and ColdFusion:

<table>
<cfoutput query="EmployeeList">
<cfset rowid = "#EmployeeList.EmployeeID#">
  <tr class="#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#" id="#rowid#" onmouseover="changeBgcolor('#rowid#','rollovercolor');" onmouseout="changeBgcolor('#rowid#','#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#');">
    <td>
    ...
    </td>
  </tr>
</cfoutput>
</table>

Since the main idea here is to alternate the colors between rows, the key set of code from the above example is the following: currentrow MOD 2. What in the heck does this mean?

ColdFusion offers a modulus function (MOD) that returns the remainder (modulus) after a number is divided by a divisor; for example,10 MOD 3 is 1. -- livedocs.macromedia.com

Since even numbers divided by the number 2 will divide evenly (i.e. no remainder), and odd numbers when divided by 2 will not, we use CurrentRow MOD 2.

The CurrentRow variable is one of a few variables that ColdFusion automatically exposes that provide information about the query. These variables are often called query variables. -- livedocs.macromedia.com

Based on what we know now, let's look at the entire "IIF" statement:

#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#

In ColdFusion, the "IIF" statement works like this:

#IIF(conditional statement, RETURN THE EXACT STRING:('value returned if the conditional statement is true'), RETURN THE EXACT STRING:('value returned if the conditional statement is false'))#

To help clarify the above even more, this: class="#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#", as a story would read "if the remainder of the current row divided by the number 2 is greater than zero (0), then the class will equal 'dark', otherwise, the class will be 'light'.

Now that we've taken care of the alternating rows, let's incorporate that 3rd color which will be used for highlighting a row. Before we go any further, let's first take a look at the JavaScript code.
Javascript:

// Determine browser
var isMinIE5 = (navigator.appVersion.indexOf("5.")) >= 0 ? 1 : 0;
var isDOM = (document.getElementById) ? 1 : 0;
function changeBgcolor(objId,objClass) {
  if (isMinIE5||isDOM) {
    document.getElementById(objId).class Name=objClass;
  } else {
    return;
  }
}

This is just a simple javascript that will change the class name of the id being passed to the function (objId) to the a new class which is also being passed to the function (objClass). These classes are simple background-color declarations in the CSS:

.light {
  background-color: #fff;
}
.dark {
  background-color: #efefef;
}
.rollovercolor {
  background-color:#ccc;
}

So, when looking at the following piece of code: onmouseover="changeBgcolor('#rowid#','rollovercolor'); ", we can determine that when the user mouses over the row, the class name of the id '#rowid#' will change to 'rollovercolor'.

At this point you may be asking, what is this '#rowid#'? In order for this entire set of code to function properly, we need to guarantee that the 'id' for the row (a.k.a. the 'tr') is unique. That is where this '#rowid#' comes into play:

<cfoutput query="EmployeeList">
<cfset rowid = "#EmployeeList.EmployeeID#">

All database tables must have a column that contains a unique identifier, called the primary key (most of the time). In the example above, we're setting the 'rowid' to be equal to the "EmployeeID", which in this case is the unique identifier for the "Employee" table. The reason for putting this value into a variable called "rowid" is so that you don't have to add "#EmployeeList.EmployeeID#" into the row's code 3 different times. It also makes it easier when you want to use this code in another section of your application!

The last thing that we need, is to make sure we set the classes back to what they were originally when the user moves the mouse off the row. So we need to add an "onmouseout" action: onmouseout="changeBgcolor('#rowid#','#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#');"

There you have it. A way to represent a table of information in a cleaner, easier to navigate fashion.
See alternating rows in action