I'll check out livequery.
On Oct 2, 6:19 pm, ricardobeat <[EMAIL PROTECTED]> wrote: > The livequery plugin (http://brandonaaron.net/docs/livequery/) might > help you. You only bind the hover function once for a selector, and > all TR's subsequently added to the tables will have the event covered > with no need to bind it again. > > And just so you know, this > tbody.hover(function () { > // over > // wish rows will be exposed on 'out' (it won't) > var rows = $(this).children('tr'); > tr.addClass('hovered'); > }, function () { > // out > rows.removeClass('hovered'); // this doesn't work > }); > > doesn't work because the 'rows' var is only known inside the first > function. You have to either declare it again on the other one or use > the jquery object directly. > > - ricardo > > On Oct 2, 5:44 pm, Brad <[EMAIL PROTECTED]> wrote: > > > Leonardo, > > > I looked at my actual code again and wondered what would happen if I > > bound the hover at the end of the loop. Your recommendations partially > > work if I do that. Since each tbody can have a variable number of > > rows, my intent is to highlight all rows when hovered. Your examples > > only highlight the first row, which isn't the desired affect. I could > > simply style the whole tbody, but the results when doing that are > > undesirable. > > > I'm most likely dealing with a special case here with some unusual > > requirements. In most cases I would expect your recommendations to > > work. > > > Thanks Again > > > On Oct 2, 2:25 pm, Brad <[EMAIL PROTECTED]> wrote: > > > > That doesn't work in my case, but thanks again for the > > > recommendation. I should note that the code > > > > // Insert HTML row into table > > > var tbody = $('<tbody>').appendTo('#' + target_id + ' table'); > > > tbody.attr('id','id-' + row.shipment_id); > > > > // This will highlight a tbody's rows on mouseEnter. > > > // The original row coloring will be restored on mouseLeave. > > > // A tbody may have numerous rows. > > > > tbody.hover(function () { // <-- tbody is a jQuery function > > > $(this).children('tr').addClass('hovered'); > > > }, function () { > > > $(this).children('tr').removeClass('hovered'); > > > }); > > > > is part of a larger loop. I'm binding the hover to each tbody as it is > > > dynamically inserted into the table. > > > > My original example, does work. I was just looking for a way to make > > > the code smaller. > > > > Thanks > > > > On Oct 2, 2:01 pm, "Leonardo K" <[EMAIL PROTECTED]> wrote: > > > > > Try this: > > > > > $(tbody).find('tr').hover(function () { > > > > $(this).addClass('hovered'); > > > > }, function () { > > > > $(this).removeClass('hovered'); > > > > }); > > > > > On Thu, Oct 2, 2008 at 16:39, Brad <[EMAIL PROTECTED]> wrote: > > > > > > Leonardo, > > > > > > I should have shown some more code. In my original example, tbody is a > > > > > reference to an jQuery object. > > > > > I'm working with a page that has many tables. Each table can have many > > > > > <tbody> elements. The number of rows in each <tbody> can vary, but in > > > > > all case there is more than 1. Unfortunately the site is behind a > > > > > firewall or I'd give a page. > > > > > > // Insert HTML row into table > > > > > var tbody = $('<tbody>').appendTo('#' + target_id + ' table'); > > > > > tbody.attr('id','id-' + row.shipment_id); > > > > > > // This will highlight a tbody's rows on mouseEnter. > > > > > // The original row coloring will be restored on mouseLeave. > > > > > // A tbody may have numerous rows. > > > > > > tbody.hover(function () { // <-- tbody is a jQuery function > > > > > $(this).children('tr').addClass('hovered'); > > > > > }, function () { > > > > > $(this).children('tr').removeClass('hovered'); > > > > > }); > > > > > > What I was curious about is if I could do something like the > > > > > following, which doesn't work. > > > > > > tbody.hover(function () { > > > > > // over > > > > > // wish rows will be exposed on 'out' (it won't) > > > > > var rows = $(this).children('tr'); > > > > > tr.addClass('hovered'); > > > > > }, function () { > > > > > // out > > > > > rows.removeClass('hovered'); // this doesn't work > > > > > }); > > > > > > Your example inspired me to try > > > > > > $(tbody).children('tr').hover(function () { > > > > > $(this).addClass('hovered'); > > > > > }, function () { > > > > > $(this).removeClass('hovered'); > > > > > }); > > > > > > but that doesn't work either. > > > > > > Thanks > > > > > > On Oct 2, 11:56 am, "Leonardo K" <[EMAIL PROTECTED]> wrote: > > > > > > $('tbody tr').hover(function () { > > > > > > $(this).addClass('hovered'); > > > > > > }, function () { > > > > > > $(this).removeClass('hovered'); > > > > > > });
