Problem
In a very simple way we will see how we can have alternating row colors and when the mouse hovers a specific row, it gets highlighted.
Solution
We will CSS for our tr tags and we will be doing this in a very simple way. Below is the detailed description of how we can can do this.
Detailed explanation
First of all we need the following CSS:
<style>
tr.rowOdd {background-color: #CCCCCC;}
tr.rowEven {background-color: #E7E7E7;}
tr.rowHighlight {background-color: #FFFF99;}
</style>
Now in our page we will define query cfoutput as:
<cfoutput query="recordset">
<cfif currentRow MOD 2>
<cfset rowClass = "rowOdd" />
<cfelse>
<cfset rowClass = "rowEven" />
</cfif>
<tr class="#rowClass#"
onmouseover="this.className='rowHighlight'"
onmouseout="this.className='#rowClass#'">
<td>#recordset.catName#</td>
</tr>
</cfoutput>
That's all we have to do to make it work. It is easy and simple enough.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Report abuse
