Problem
• Display a table of data with alternating row colors • Highlight rows and show cms options on hover • No javascript • Cross browser • No browser-specific code
Solution
We'll use some simple CF code and CSS for this.
Detailed explanation
I use this method in CMS's that I build for clients. It's a nice effect, very clean and simple. And the code is pretty tight, too.
Here is the CF...
<tbody class="list">
<Cfoutput query="staff">
<tr class="row#(currentrow mod 2)#">
<Td >#FullName#</td>
<td align="left">#email#</td>
<td>#lastlogin#</td>
<td align="right">#Logins#</td>
<td class="options"><a
href="update.cfm?staffid=#staffid#" title="Edit"><img
src="/media/admin/icon-edit.png" alt="" width="16" height="16"
/></a> <a href="delete.cfm?staffid=#staffid#"
title="Delete"><img src="/media/admin/icon-delete.png" alt=""
width="16" height="16" /></a></td>
</tr>
</cfoutput>
</tbody>
And the CSS...
.rowr0 TD {
background-color:#b5c6cb;
}
.row1 TD {
background-color:#c7d4d8;
}
.options {
position: relative;
background: transparent !important;
}
.options IMG {
visibility: hidden;
}
TBODY.list TR:hover TD.options IMG {
visibility: visible;
}
TBODY.list TR:hover TD {
background: #ffefef;
}
+
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
