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:1 <cfquery name="art" datasource="cfartgallery">
2 select *
3 from 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 select *
3 from art
4 </cfquery>
1 <table id="artTable" border="1">
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 <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>
1 $(document).ready(function() {
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 $("#artTable input:checkbox").click(function() {
4 $(this).parent().parent().toggleClass("highlight")
5 })
6 })
1 <html>
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">
23 select *
24 from 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>
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">
23 select *
24 from 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>
Comment 1 written by Eric Hynds on 18 November 2009, at 1:37 PM
Comment 2 written by Matt on 18 November 2009, at 1:52 PM
Comment 3 written by Raymond Camden on 18 November 2009, at 2:11 PM
@Matt: odd - it works ok for me. What browser?
Comment 4 written by Chuck Savage on 18 November 2009, at 2:22 PM
There anyway to get your code examples without line numbers?
Comment 5 written by Matt on 18 November 2009, at 2:22 PM
Comment 6 written by Raymond Camden on 18 November 2009, at 2:26 PM
@Matt: Let me know if you discover an issue though.
Comment 7 written by Brian Lang on 18 November 2009, at 4:16 PM
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.
Comment 8 written by Justin Schier on 18 November 2009, at 6:59 PM
$("#artTable input:checkbox").click(function() {
$(this).closest('tr').toggleClass("highlight")
})
Comment 9 written by parthiban on 18 November 2009, at 8:04 PM
www.phpjquery.com
Comment 10 written by Tim Leach on 18 November 2009, at 11:23 PM
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.
Comment 11 written by Tim Leach on 18 November 2009, at 11:24 PM
*because
Comment 12 written by Raymond Camden on 19 November 2009, at 6:38 AM
Comment 13 written by Raymond Camden on 31 December 2009, at 9:39 AM
@Chuck - no more line #s. Thank Jason Delmore.
[Add Comment] [Subscribe to Comments]