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>