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