Posted in jQuery, ColdFusion | Posted on 11-18-2009 | 3,551 views
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:
2select *
3from art
4</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:
2 <tr>
3 <td> </td>
4 <th>Name</th>
5 <th>Price</th>
6 </tr>
7 <cfoutput query="art">
8 <tr>
9 <td><input type="checkbox" name="select" value="#artid#"></td>
10 <td>#artname#</td>
11 <td>#dollarFormat(price)#</td>
12 </tr>
13 </cfoutput>
14</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:
2
3 $("#artTable input:checkbox").click(function() {
4 $(this).parent().parent().toggleClass("highlight")
5 })
6})
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!
2
3<head>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
5<script>
6$(document).ready(function() {
7
8 $("#artTable input:checkbox").click(function() {
9 $(this).parent().parent().toggleClass("highlight")
10 })
11})
12</script>
13<style>
14.highlight {
15 background-color:pink;
16}
17</style>
18</head>
19
20<body>
21
22<cfquery name="art" datasource="cfartgallery">
23select *
24from art
25</cfquery>
26
27<table id="artTable" border="1">
28 <tr>
29 <td> </td>
30 <th>Name</th>
31 <th>Price</th>
32 </tr>
33 <cfoutput query="art">
34 <tr>
35 <td><input type="checkbox" name="select" value="#artid#"></td>
36 <td>#artname#</td>
37 <td>#dollarFormat(price)#</td>
38 </tr>
39 </cfoutput>
40</table>
41
42</body>
43</html>
@Matt: odd - it works ok for me. What browser?
There anyway to get your code examples without line numbers?
@Matt: Let me know if you discover an issue though.
You could modify your <tr> tag to include an id attribute prefaced with a letter (for integers). For example: <tr id="a#artid#">.
Also change the <input> value attribute to "a#artid#". For example: <td><input type="checkbox" name="select" value="a#artid#"></td>
Then change your JQuery click function to the following:
$("#" + $(this).val()).toggleClass("highlight");
What this does: Concatenate the ID selector (#) with the value of the ID attribute and toggle the class.
$("#artTable input:checkbox").click(function() {
$(this).closest('tr').toggleClass("highlight")
})
www.phpjquery.com
I'd be more comfortable with:
if(this.checked){
$(this).parents('tr').addClass("highlight");
}else{
$(this).parents('tr').removeClass("highlight");
}
Or for jQ 1.3 a simple:
$(this).parents('tr').toggleClass("highlight",this.checked);
Just becomes somewhere, somehow one of those will end up checked by default, and have the opposite effect.
*because
@Chuck - no more line #s. Thank Jason Delmore.
[Add Comment] [Subscribe to Comments]