Files used
table_hover.css
tablehover.cfm

Demo
View Demo Here

After doing some research on doing this on my own site, I thought I would show the end product to everyone at easycfm.com

This can be accomplished in as little as 1 file or as many as 3. I am going to show how to do it using an external CSS. Of course you can just use inline styles do accomplish all of this.

The 1st page is the CSS. This just sets up the styling for the page color, font styles and coloring. The important part is the "hover style" at the bottom. This sets up the mouse over color change.
table_hover.css
/******* simple page style *******/
body{
   font-family: Arial,sans-serif;
   color: #000000;
   line-height: 1.166;
   margin: 0px;
   padding: 0px;
   background: #FFFFFF;
}

/******* hover style *******/
.mytable tr:hover { background-color: gray; }

The Second file contains the actual table. Here we will set up the database access and the dynamic table. Here I am using a simple last name and first name table for simplicity.

tablehover.cfm
<head>
   <title>
Simple Table Row Color changes on Hover</title>

   <!--- Set up the CSS external sheet. This is needed to make the mouse over work. If you do not want to use an external style sheet, you need to add .mytable tr:hover { background-color: gray; } to style tags --->
   <link rel="stylesheet" type="text/css" href="table_hover.css" />
</head>

<body>
<!--- Set up the Query for the table. Use your information here. Either thruough the Application.cfm file or hard coded. --->
<CFQUERY NAME="names" DATASOURCE="DSN" USERNAME="UserName" PASSWORD="Password">
   SELECT first_name, last_name
   FROM DSN
   ORDER BY last_name
</CFQUERY>

<!--- Set up the Variables for the table row colors so users can change them easily. These are used to make the alternating rows in the table. It's always a good idea to use cfparam so there aren't any errors with unloaded variables. --->
<cfparam name = "tr1" default = 'bgcolor="##CCCCCC"'>
<cfparam name = "tr2" default = 'bgcolor="##FFFFFF"'>

<!--- Dynamically build the table. Make sure you use the mytable class so that it pulls the css from the external style sheet. --->
<table class="mytable" border="1">
   <tr>
      <th>
Last Name</th>
      <th>
First Name</th>
   </tr>

   <cfoutput query="names">
   
<tr
      <!--- Begin the row color changes using the variable we initialized above --->
      
<cfif (currentrow MOD 2) IS 1>
      
   #tr1#
      <cfelse>

         #tr2#
      </cfif>

   >
      <td>
#last_name#</td>
      <td>
#first_name#</td>
   </tr>

   </cfoutput>

</table>
</body>
</html>

That's pretty much it. Simple isn't it!

About This Tutorial
Author: Michael Gomez
Skill Level: Beginner 
 
 
 
Platforms Tested: CF8
Total Views: 80,891
Submission Date: July 10, 2009
Last Update Date: July 10, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial
Advertisement

Sponsored By...
Mobile App Development (IOS, Android, Cordova, Phonegap, Objective-C, Java) - Austin, Texas Mobile Apps - Touch512, LLC.