[jQuery] Re: PROBLEM: Adding hover to table rows on large tables

[Josh Nathanson]

I had to do just that (add mouse events directly to the html elements) in a 
similar situation.  Binding via jQuery was too slow when it got up to 1000 or 
so bindings.  I was getting the "long running script" errors.  A necessary evil 
in that scenario I'm afraid.

In my case users can select how much data they want to view.  Sometimes people 
like loading tons of data onto a page, as they prefer scrolling to paging.

-- Josh




----- Original Message ----- 
  From: Karl Swedberg 
  To: jquery-en@googlegroups.com 
  Sent: Tuesday, November 06, 2007 1:55 PM
  Subject: [jQuery] Re: PROBLEM: Adding hover to table rows on large tables


  You could add onmouseover and onmouseout directly to the <tr>s. It's ugly 
(don't tell anyone I suggested it), but it might avoid the overhead.




  --Karl
  _________________
  Karl Swedberg
  www.englishrules.com
  www.learningjquery.com






  On Nov 6, 2007, at 3:43 PM, fambizzari wrote:




    You guys are all right, but so many rows on one page are necessary
    here.


    I'll try to figure out an acceptable work-around.


    Thanks






    On Nov 6, 8:38 pm, "Andy Matthews" <[EMAIL PROTECTED]> wrote:
      I'd have to agree. I can't see any practical reason why you'd need to
      display that much data on one page. Aside from the download, and rendering
      time, the performance of the browser with that much data in memory would 
be
      horrible. Scrolling, copying, etc. would all be severely affected.


      andy


      -----Original Message-----
      From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On


      Behalf Of Jeffrey Kretz
      Sent: Tuesday, November 06, 2007 9:21 AM
      To: jquery-en@googlegroups.com
      Subject: [jQuery] Re: PROBLEM: Adding hover to table rows on large tables


      Personally, I would recommend looking at a paging solution, rather than
      trying to deal with so many rows on a single HTML page.


      I tested a simple 10,000 row table with very little data in it clocked in 
at
      a 2mb download, requiring 4 seconds to download and render as a local file
      on FireFox (i.e. no network traffic, loading the .htm file out of my local
      file system).


      And the more DOM elements of the page the harder it is to manipulate with
      any kind of scripting.


      If paging your results doesn't work for you, then the tr:hover CSS-only
      solution would really be the best way to go.


      JK
      -----Original Message-----
      From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
      Behalf Of fambizzari
      Sent: Tuesday, November 06, 2007 2:29 AM
      To: jQuery (English)
      Subject: [jQuery] Re: PROBLEM: Adding hover to table rows on large tables


      The solution i adopted was CSS (tr:hover) for non-IE6 and only allow small
      tables to have hover-over using a class name to identify them.


      Any better solutions?


      On Nov 6, 10:45 am, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote:
        The following code works fine on small tables:


            $("table tbody


      
tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(
      this).removeClass("over");});


        But on tables with 5,000-10,000 rows, it throws the "A script on this
        page may be busy, or it may have stopped responding. You can stop the
        script now, open the script in the debugger, or let the script 
continue."


        Can anyone suggest a workaround?


        Thanks