Alternating Row Colors
Get the Code for this Tutorial
View a Working Example of This Code
Comment on this Tutorial
Introduction
Using the inline if available in ColdFusion we can create alternating row colors very quickly and easily.
Yes, you could do the same thing with a regular cfif, cfelse block, but the iif() statement is nice and compact. It fits within a single line of html.
This is the same method used in the Macromedia CFMX 7 Reference, but I prefer to use CSS classes instead of outdated html bgcolor attribute. For this tutorial to work, you will need to implement a Style Sheet with two classes. One for the first row color, and one for the second.
The Query
A simple query to get us started. It is from the sample database. You can download it from the link at the top of the page.
<cfquery name="get_data" datasource="#dsn#">
SELECT names
FROM cfml_example_data
ORDER BY names
</cfquery>
The Code
The code is pretty simple. Start by creating an html table. When you use this code for your own website, you will probably want to use a style for the table and header also to make it look nice.
<table>
<tr><td>First Name</td></tr>
Then output the query using cfouput or cfloop.
<cfoutput query="get_data">
Now use the iif() function to decide which CSS class to use for the row style. This iff statement is saying: if currentrow divided by 2 has a remainder of 0, use alt_color1 for the class, or else use alt_color2. Since we are dividing by 2, the remainder will always be 0 or 1. Using DE() with iif() makes it easier to use with strings, especially if they have doble qoutes. If you are using cfml variables instead of class names, you would not use DE()
<tr class="#iif(currentrow mod 2 EQ 0, DE("alt_color1"), DE("alt_color2"))#">
<td>
#names#
</td>
</tr>
Close cfoutput
</cfoutput>
Finish the table
</table>
The Long Method
The other way I mentioned would be to write out a full cfif, cfelse block. You can see, it takes up more space, and clutters the script when compared to the iif() version
<cfoutput query="get_data">
<cfif currentrow mod 2 EQ 0>
<cfset rowClass = "alt_color1">
<cfelse>
<cfset rowClass = "alt_color2">
</cfif>
<tr class="#rowClass#">
<td>
#names#
</td>
</tr>
</cfoutput>
____________
Tutorial Code
Download the Database<!--------------------------------------------
Kevin Sargent
November 12th 2005
http://www.lot-o-nothin.com/cfml/
Please Give Credit Where Used.
--------------------------------------------->
<!--- using our sample database, get some names --->
<cfquery name="get_data" datasource="#dsn#">
SELECT names
FROM cfml_example_data
ORDER BY names
</cfquery>
<!--- create an html table. You can add more styles to this if you want. --->
<table>
<!--- Label the headers of the columns to be displayed --->
<tr><td>First Name</td></tr>
<!--- cfoutput the query --->
<cfoutput query="get_data">
<!--- if currentrow divided by 2 has a remainder of 0, use alt_color1 for the class style.
if it does not equal 0, use alt_color2. --->
<tr class="#iif(currentrow mod 2 eq 0, DE("alt_color1"), DE("alt_color2"))#">
<td>
#names#
</td>
</tr>
<!--- close the output --->
</cfoutput>
<!--- finish the table --->
</table>
Comments
Nita
06/20/2007
neat code but how do you set alt_color1 and 2?
webmaster
06/28/2007
alt_color1 and 2 are CSS CLASSES that would be in your CSS somewhere.
