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>