jQuery Quickie: Highlighting a table row after selecting a checkbox (2)

This post is more than 2 years old.

This is a follow to an earlier post that discussed how to use jQuery and checkboxes to highlight a row. A user wrote in with two requests that were fairly sensible so I thought I'd share them here.

The first thing the user asked about was how to handle pre-selected rows. Another reader had asked that as well and I said I didn't support that because I was following a "GMail" style model where, normally, nothing is checked when the page loads. It's a fairly simple enough modification though. Consider the following.

<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" maxrows="15"> select * from art </cfquery>

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

</body> </html>

I've added code so that when a piece of art is sold, it's automatically marked with the highlight class. And, um, that's it. The magic of the jQuery toggle() function means it just plain works which is part of the reason I love jQuery. So whether it has the class or not, the toggle() will handle it.

The second request was a bit odder. He actually wanted to use two tables to display his data. The table on top had just the name of the art and the second table had the description. He wanted to make it so that on clicking the checkbox in the first table, the corresponding record in the second table would be updated.

I began by adding the second table:

<table id="artTable1" border="1"> <tr> <th>Description</th>

</tr> <cfoutput query="art"> <tr class="<cfif isSold>highlight</cfif> id#artid#"> <td> #description#

</td> </tr> </cfoutput> </table>

As you can see, it duplicates the logic of adding the highlight class when the art is sold. But I've also added a new class, id#artid#. I'm using this as a marker. It just occurred to me that I could have tried an ID on the TR tag as well. Anyway - back to our jQuery code. The checkboxes already had a value that was the ID, so I added:

var myid = $(this).val()

and then:

$("#artTable1 tr.id"+myid).toggleClass("highlight")

The complete code listing is below, and I've set up a demo of this here.

<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() {
			var myid = $(this).val()
           $(this).parent().parent().toggleClass("highlight")
		   $("#artTable1 tr.id"+myid).toggleClass("highlight")
   })

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

<body>

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

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

<table id="artTable1" border="1"> <tr> <th>Description</th>

</tr> <cfoutput query="art"> <tr class="<cfif isSold>highlight</cfif> id#artid#"> <td> #description# </td> </tr> </cfoutput> </table>

</body> </html>

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

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

Archived Comments

Comment 1 by Bob posted on 1/5/2010 at 8:57 PM

How would I go about using a Reset button to clear the checkboxes and remove the highlights?

Comment 2 by Raymond Camden posted on 1/5/2010 at 9:01 PM

Reset can mean two things. Return to the original status (some highlighted possibly), or remove all. To me, it means the first normally. But you want to clear them all?

Comment 3 by BinaryKitten posted on 1/5/2010 at 9:20 PM

if this was to be used in an actual form .. as in the checkboxes usable then using the value would break this.. what about using the rel attribute? where the rel="idOfRow" alternatively $(this).closest('tr').toggleClass('highlight'); which is the smallest code for it.

Comment 4 by Raymond Camden posted on 1/5/2010 at 9:28 PM

How so? They all have the same name. On submit, you would have a list of checked rows.

Comment 5 by BinaryKitten posted on 1/5/2010 at 9:33 PM

if the value was a value for the row. and not a rowID then value wouldn't work when it comes back to the server properly would it not? I've always ascribed to the idea using the right attribute for the right task.. since rel is for Relationship .. the checkbox is related to the Row rel for me would be the better option. Though i would probably go with .closest('tr') as that would be cleaner.

Comment 6 by Raymond Camden posted on 1/5/2010 at 9:38 PM

Errr, I don't think I'm reading you. The value is the primary key of the piece of art. I'm not arguing with you in terms of if rel= would be a better solution, but I don't agree that it is broken now - if that makes sense.

Definitely with you on closest('tr'). I believe someone mentioned that on the first post - but I didn't update to that.