How do I alternate row colors in a table?
Two functions are used in one expression which allow for a clean implementation of alternating row colors. IIf() takes three parameters (condition,expression1,expression2) and evaluates either the first expression or the second expression depending if the current row is even or odd. DE() takes on parameter which is an expression and delays the evaluation of the expressions.
The following example uses CSS to style the alternating rows of content:
SELECT *
FROM table
</cfquery>
<style type="text/css">
tr.lightrow td {
background-color: #FFFFFF;
}
tr.darkrow td {
background-color: #EFEFEF;
}
</style>
<table>
<cfoutput query="myTest">
<tr class="#iif(currentrow MOD 2,DE('lightrow'),DE('darkrow'))#">
<td>1</td>
<td>myField</td>
</tr>
</cfoutput>
</table>
This question was written by Cory Toth.
It was last updated on January 9, 2006 at 12:10:49 PM EST.
CFML Referenced
<cfoutput>
IIf()
DE()
<cfquery>
Categories
Comments
Comment made by Patrick Correia on January 9, 2006 at 11:36 AM
For some reason, expressions using MOD in a boolean context always make my head spin. In this case, the expression "currentrow MOD 2" will evaluate to false for each row whose number is evenly divisible by 2. So the first row will be 'lightrow'.
Comment made by Maxx on January 9, 2006 at 12:25 PM
I have read many times that you should not use iif and DE due to speed issues. Can any one verify this?
I use teh following
<cfoutput query="myTest"> <cfset rowclass = "darkrow"> <cfif currentrow mod 2><cfset rowclass = "lightrow"></cfif> <tr class="#rowclass#"> <td>1</td> <td>myField</td> </tr> </cfoutput>
any thoughts?
Comment made by Chris Speelman on January 9, 2006 at 12:39 PM
I do without the iif and use the mod by itself and name the styles row0 and row1
-----8<-------------- <style type="text/css"> tr.row0 td { background-color: #FFFFFF; } tr.row1 td { background-color: #EFEFEF; } </style>
<table>
<cfoutput query="myQuery"> <tr class="row#(myQuery.currentrow mod 2)#"> <td>blah blah</td> </tr> </cfoutput> </table>
it just makes the code a bit cleaner.
Comment made by Damon Gentry on January 9, 2006 at 1:41 PM
I like Chris' approach on this. It's probably much cleaner than mine:
<cfoutput query="myQuery"><cfif (currentRow MOD 2 EQ 0)><tr><cfelse><tr class="oddRow"></cfif><br\> <td>blah blah blah</td><br\> </tr><br\> </cfoutput>
Comment made by Matt on January 9, 2006 at 8:50 PM
How would you do it if your cells were actually divs in CSS instead of tables?
Comment made by Tjarko Rikkerink on January 10, 2006 at 6:56 AM
To answer that, just change the code Chris made (by the way.. real neat!!) and change your TR tag into a DIV tag and strip the other table tags... that's it.
<div class="row#(myQuery.currentrow mod 2)#"></div>
Comment made by Alistair Davidson on January 11, 2006 at 12:50 PM
You can also go for explicit readability and code "cleanliness" using a UDF:
<cffunction name="getRowClass" returntype="string"> <cfargument name="row" type="numeric" required="true" /> <cfargument name="lstValues" type="string" default="row1,row2" /> <cfset var l = structNew() /> <cfset l.max = listLen(arguments.lstValues) /> <cfset l.index = arguments.row MOD l.max + 1 /> <cfset l.value = listGetAt( arguments.lstValues, l.index ) /> <cfreturn l.value /> </cfif> </cffunction>
Then your output code is nice and clean :
<div class="#getRowClass(row=myQuery.currentRow)#">
Plus it has the advantages that:
- you can change the classnames that you choose from just by passing in a different list - you can pass a list of any length, so if you want to choose from, say, five different shades of gray, you just pass in a five-element list of classnames.
Comment made by Chris on February 13, 2006 at 11:23 AM
Not all of these show in different browsers. Mostly in IE but not always in firefox such as this one, <tr bgcolor="#IIF(CurrentRow MOD 2, DE('FFFFFF'), DE('F2F3F7'))#">
Comment made by Shayne Sweeney on June 15, 2007 at 7:18 PM
<cfset j=0 /> <cfloop index="i" from="1" to="10"> <cfset j = -j + 1 /> <cfoutput>#j#</cfoutput> </cfloop>
Comment made by xxcemil on June 2, 2008 at 12:17 PM
about css parameters http://css-lessons.ucoz.com/css-parameters.htm
Comment made by Joel Stobart on July 1, 2008 at 10:01 AM
I now use jquery cos I is lazy....
http://jquery.com/blog/2006/10/18/zebra-table-showdown/
$("tr:nth-child(odd)").addClass("odd");
Add a Comment