One of the nice little UI features in GMail is how it will highlight an entire table row when you check the checkbox for a particular mail message. It's a relatively simple thing to do but I wanted to whip up a quick sample for myself. Here is one way to do it with ColdFusion and jQuery.

First, our data:

<cfquery name="art" datasource="cfartgallery"> select * from art </cfquery>

Yes, I know, select * is evil. I figure as long as I don't drop an entire database in my SQL statement I'm coming out ahead. Next - the output:

<table id="artTable" border="1"> <tr> <td> </td> <th>Name</th> <th>Price</th> </tr> <cfoutput query="art"> <tr> <td><input type="checkbox" name="select" value="#artid#"></td> <td>#artname#</td> <td>#dollarFormat(price)#</td> </tr> </cfoutput> </table>

Nothing too fancy here. I display two columns from the query along with a checkbox in the left most column. Now for the JavaScript:

$(document).ready(function() {
$("#artTable input:checkbox").click(function() {
	$(this).parent().parent().toggleClass("highlight")
})

})

Basically - listen to click events in checkboxes within my art table, and on click, toggle a CSS class named highlight. Not exactly rocket science, but it gets the job done! The entire template is below the screen shot. Enjoy!

<html>

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() {

$("#artTable input:checkbox").click(function() {
	$(this).parent().parent().toggleClass("highlight")
})

}) </script> <style> .highlight { background-color:pink; } </style> </head>

<body>

<cfquery name="art" datasource="cfartgallery"> select * from art </cfquery>

<table id="artTable" border="1"> <tr> <td> </td> <th>Name</th> <th>Price</th> </tr> <cfoutput query="art"> <tr> <td><input type="checkbox" name="select" value="#artid#"></td> <td>#artname#</td> <td>#dollarFormat(price)#</td> </tr> </cfoutput> </table>

</body> </html>