jQuery Quickie: Highlighting a table row after selecting a checkbox

November 18, 2009 coldfusion jquery

(This post is more than 2 years old.)

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>