Tabelle mit wechselnden Farben und onmouseover-Highlightning mit Coldfusion

Posted on by marcus

Hier ein praktisches Snippet für alle diejenigen, die auch öfters mal Tabellen erstellen müssen. Die Anforderungen sind meistens ziemlich gleich: die Tabellen sollen automatisch abwechselnde Zeilenfarben haben und mittels mouseover soll eine Zeile nochmal gehighlightet werden. Hier eine kurze Code-Umsetzung

Okay, also erstmal das CSS definieren:

<style>
tr.rowLight {background-color: #CCC}
tr.rowDark {background-color: #6699CC}
tr.rowHighlight {background-color: #ffcc33}
</style>

dann wird über die Abfrage geloopt und mit Hilfe der Modulo-Funktion werden die abwechselnden Klassen für die Farben gesetzt.


<cfquery name="getArticles" datasource="#request.datasource#">
SELECT TOP 10 column1,column2 from tablename </cfquery>
<table>
<th>column1</th>
<th>column2</th>
<cfoutput>
<cfloop query="getArticles">
<tr class="#IIf(CurrentRow Mod 2, DE('rowLight'), DE('rowDark'))#" onmouseover="this.className='rowHighlight'" <cfif CurrentRow Mod 2>onmouseout="this.className='rowLight'"<cfelse>onmouseout="this.className='rowDark'"</cfif>>
<td>#column1#</td>
<td>#column2#</td>
</tr>
</cfloop>
</cfoutput>
</table>

Prima, das war’s schon, fertig. Wenn Ihr wollt, hier das Script zum Download

Schreibe einen Kommentar