jQuery Quickie: Highlighting a table row after selecting a checkbox

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")
}) }) </code>

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")
}) }) &lt;/script&gt; &lt;style&gt; .highlight {
background-color:pink; } &lt;/style&gt; &lt;/head&gt;

<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> </code>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate looking for his next gig. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments