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');
> > > });
