The issue that I am having with doing it that way is that the hover
action is only triggered when a person mouses over the table. You can
move all around the table, but it won't trigger again until the mouse
is moved off and then back on the table. I need the over to be
triggered for every row. Is there a way to get around this?
On Feb 17, 2:52 pm, James <james.gp....@gmail.com> wrote:
> It seems you're still binding several events to every <tr> and not
> using event delegation.
> Your goal is to make events like click and hover attached to the table
> instead of on each row, such that your very top-level statements look
> like:
>
> $(table).click(function() {});
>
> $(table).hover(
> function() {},
> function() {}
> );
>
> --> 2 events attached (well, technically it's 3, since hover is
> onmouseover and onmouseout)
>
> Rather than:
>
> $('table').find('tr').each(
> $(row).click(function() {});
> $(row).hover(...);
> );
>
> --> 2 x #ofRows events attached (640 events attached, if you have 320
> rows)
>
> When you use event delegation, you bind a click on the table itself.
> When a user clicks anywhere on the table, you act on what was clicked.
> When a user clicks on a table, it'll most likely be a <td> that they
> clicked on. event.target will give you reference to that element. So
> if you use, something like:
> tr = $(event.target).parent();
> you can get the <tr> that the clicked <td> is in.
>
> Then you can do something with the <tr>, such as getting the ID of it.
> myID = tr.attr("id");
>
> On Feb 16, 9:58 am, zenbaida <zenba...@gmail.com> wrote:
>
> > OK, I rewrote the code, and the page loads a lot faster, but I ran
> > into another problem. Now the performance of the script slows down as
> > the length of the table increases. As I hover over a cell in the above
> > table that triggers the event, it may take a half second or so to
> > trigger. I tested the same script with version 1.2.6, and there is no
> > delay issue.
>
> > Here is the new code:
> > function setDetail()
> > {
> > $('.detailShowIcon').hide(); // hide all of the detail show icons
> > $('.detailShowIcon').parent().addClass('arrowHidden').css
> > ({width:'20px', height:'18px'});
> > $('#subject .row').after('<div id="hoverPrinter"><code></code></
> > div>');
>
> > // for the arrow detail toggles
> > $('table').find('tr').each(function(i)
> > {
> > var rowId = $(this).attr('id');
> > if(rowId && !rowId.match('detail'))
> > {
> > var hoverArea = '#' + rowId + " " + 'td#arrow-' +
> > rowId;
>
> > $(hoverArea).click(function(event)
> > {
> > var thisParent =
> > $(this).parent().attr('id');
> > var imageRow = '#' + thisParent;
> > var detailDiv = '#detail-' + thisParent;
> > //alert($(event.target).is(imageCellDiv));
> > if($(imageRow).attr('class') == 'text2')
> > {
> > $(imageRow).attr('class','text4');
> > $(detailDiv).hide();
> > }
> > else
> > {
> > $(imageRow).attr('class','text2');
> > $(detailDiv).show();
> > }
>
> > setFooter(); // re-calculate the footer
> > possition
> > });
>
> > $(hoverArea).hover(function(event)
> > {
> > var imageRow = '#' +
> > $(this).parent().attr('id');
> > var imageCellDiv = '#' + $(this).attr('id')
> > + ' div';
> > if($(imageRow).attr('class') != 'text2')
> > {
> > $(imageRow).attr('class','text4');
> >
> > $(imageCellDiv).removeClass('arrowHidden');
> > }
> > else
> > {
> >
> > $(imageCellDiv).removeClass('arrowShow');
> > }
> > $(imageCellDiv).addClass('arrowActive');
> > },
> > function(event)
> > {
> > var imageRow = '#' +
> > $(this).parent().attr('id');
> > var imageCellDiv = '#' + $(this).attr('id')
> > + ' div';
> > if($(imageRow).attr('class') != 'text2')
> > {
> > $(imageRow).attr('class','text3');
> >
> > $(imageCellDiv).removeClass('arrowActive');
> >
> > $(imageCellDiv).addClass('arrowHidden');
> > }
> > else
> > {
> >
> > $(imageCellDiv).removeClass('arrowActive');
> >
> > $(imageCellDiv).addClass('arrowShow');
> > }
> > });
> > }
> > });
>
> > }
>
> > On Feb 12, 3:23 pm, zenbaida <zenba...@gmail.com> wrote:
>
> > > Thanks for the reply. I will try it and let you know how it goes.
>
> > > On Feb 12, 2:02 pm, James <james.gp....@gmail.com> wrote:
>
> > > > Try looking into using Event Delegation for managing your events. This
> > > > means, instead of attaching events to a specific elements (thus, many
> > > > attachments and more processing time), you're attaching just a single
> > > > event to the parent element and take actions for the children's
> > > > events. Here are some links to
> > > > help:http://www.learningjquery.com/2008/03/working-with-events-part-1http:...
>
> > > > On Feb 12, 10:30 am, zenbaida <zenba...@gmail.com> wrote:
>
> > > > > I have a table that I am parsing with jQuery. The table is used to
> > > > > show data related to various objects. It alternates between a row with
> > > > > applicable data, and a hidden row that contains other details. The
> > > > > main body of the table is built with multiple html blocks like so:
>
> > > > > <tr class="text3" valign="top" id="row01">
> > > > > <td id="arrow-row01"><div><img
> > > > > src="/d-elearn/intranet/inv2/themes/
> > > > > default/icons/general/disabled_arrow.png" alt="Detail Toggle Icons
> > > > > Column" width="16" height="16" /></div></td>
> > > > > <td><div class="inUse">In Use</div></td>
> > > > > <td>{some data}</td>
> > > > > <td>{more data}</td>
> > > > > <td>{data}</td>
> > > > > <td>{data}</td>
> > > > > <td>{data}</td>
> > > > > <td class="optionCell">{Options for data go
> > > > > here}</td>
> > > > > </tr>
> > > > > <tr id="detail-row01" class="details">
> > > > > <td colspan="8">{Bunch of detail stuff goes
> > > > > here</td>
> > > > > </tr>
>
> > > > > Here is the code that parses the above html:
>
> > > > > function setDetail()
> > > > > {
> > > > > // for the arrow detail toggles
> > > > > $('table').find('tr').each(function(i)
> > > > > {
> > > > > var rowId = $(this).attr('id');
> > > > > //if(i < 5) alert(trId.match('detail'));
> > > > > if(rowId && !rowId.match('detail'))
> > > > > {
> > > > > var imageRow = '#' + rowId;
> > > > > var imageCellId = '#arrow-' + rowId;
> > > > > var imageCellImage = imageCellId + ' div
> > > > > img'; // the detail arrow
> > > > > icon
> > > > > var imageCellDiv = imageCellId + ' div'; //
> > > > > the detail arrow icon
> > > > > container
> > > > > var detailDiv = '#detail-' + rowId;
> > > > > $(detailDiv).hide(); // hide the details
> > > > > $(imageCellImage).hide();
> > > > >
> > > > > $(imageCellDiv).addClass('arrowHidden').css({width:'20px',
> > > > > height:'18px'}).hover(function()
> > > > > {
> > > > > if($(imageRow).attr('class')
> > > > > != 'text2')
> > > > > {
> > > > >
> > > > > $(imageRow).attr('class','text4');
> > > > >
> > > > > $(imageCellDiv).removeClass('arrowHidden');
> > > > > }
> > > > > else
> > > > > {
>
> ...
>
> read more »
