Wow that's a lot of stuff for this measly peon - but thanks very much, I learned something I did not understand about selectors. This particular example seems a bit too advanced to me so I am putting some simpler ideas together.
Let's hope I can get it to work. MW -----Original Message----- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Dan G. Switzer, II Sent: Sunday, July 22, 2007 5:20 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Click to Call a Function: The Movie Mitchell, >This looks better on a big screen but do I have this right? > >http://www.whatbird.com/wwwroot/images/addClass.gif >From that image, it looks like you understand the basic concepts. I'm just adding some notes below that you might find useful/helpful: * For a real word example, you'll want more specificity in your jQuery selectors. Normally you'd only be applying this functionality to a limited number of tables (most likely just one.) By either giving your table a unique ID (which is the most efficient way to select an element) or by giving your table a class (like ".interactive".) Then you can change your selectors to something like: $('table#myId td') - or - $('table.interactive td') This would make sure the effect is only applied to your desired tables. * If you want the "selected" cells (the ones in the tr.bar class) to also get highlighted when you mouse over them, you want define the tr.foo class after the tr.bar class. Classes have a priority based upon their order in the DOM. The priority goes lowest to highest (so the first CSS declaration in your style tag has the lowest priority and the last one has the highest priority.) * I know this was a sample, but name your CSS declarations something meaningful. Instead of using ".foo" use ".hover". Instead of ".bar" use ".selected". * Instead of adjusting the background color of the table cells (TD) you might want to just change the background color of the table rows (TR). Change your class declarations to "tr.foo" and "tr.bar" respectively (just remove the "td" rule. This will change the background color of the entire row. * You can apply the "click" event to the "tr" element as well. This is more efficient as well. You would have to use the .parents() to find the "TR" element, since it would the element referenced by "this". Every event handler gets passed and argument that contains a copy of the event object. You can use this to determine which element was clicked. (NOTE: The event object will return the exact element clicked. So if your TD contains P, STRONG, EM tags it would return whatever element was clicked. You could use the .parents() method to find the "TD" tag if you needed.) -Dan
