Note: I'm not going to directly answer your question.
If you're paging over this many rows, I imagine that there's a server-
side language involved. You should do one of two things: Either
paginate the results, making jQuery's job easy, or take jQuery out of
the equation and add classes accordingly, specifically for the "alt"
class. This is trivial to implement when the server-side-language is
generating the rows. Just use the modulus operator. If you're doing
this in PHP, Ruby, or Python, I can give you a quick snippet to do
this, assuming the data comes from an array, which it almost always
does.
On Jun 24, 4:06 pm, Kyle <[EMAIL PROTECTED]> wrote:
> Hi everybody. I'm looking to optimize a few lines of code here.
> Basically, I have a table with sometimes as many as 1600 or more rows.
> I want to zebra stripe the table, add a clicked class (for batching
> the rows), and also hovering.
>
> $("table.fullWidth tr:odd").filter(":not(.last)").addClass("alt");
> $("table.fullWidth tr").filter(":not(.last,.first)").bind("mouseenter
> mouseleave", function(){
> $(this).toggleClass("over");});
>
> $("table.fullWidth tr").bind("click",function(){ $
> (this).toggleClass("clicked"); });
>
> This code works perfectly, but can take noticeable time to execute
> when there are a lot of rows. That should be expected, however, since
> it takes 3 passes through the DOM.
>
> My goal - if it isn't clear by the code - is to stripe all but the
> first and last row, add a hover effect to all but the first and last
> row, and then add the ability to click on any row but the first and
> last row to add the clicked class.
>
> My first attempt is on the next line, but I would really like to
> minimize passes. And I don't think this does it as well as it could.
> And this is doubly true when you look at the times.
>
> var table = $("table.fullWidth tr").filter(":not(.last,.first)");
> table.filter(":odd").addClass("alt").bind("mouseenter mouseleave",
> function(){ $(this).toggleClass("over"); });
> table.filter(":even").bind("mouseenter mouseleave", function(){ $
> (this).toggleClass("over"); });
> table.bind("click",function(){ $(this).toggleClass("clicked"); });
>
> The original code takes:
> 16 ms for 17 rows (average).
> 390 ms for 453 rows (average).
> 1610 ms for 1505 rows (average).
>
> My optimized code takes:
> 16 ms for 17 rows (average). ... larger range, however. 80% were 14
> ms.
> 369 ms for 453 rows (average).
> 1635 ms for 1505 rows (average).
>
> I don't know if I ran these tests correctly. It was my first time. I
> ran each script 10 times and timed it with Firebug.
>
> The other option would be something like this:
>
> $("table.fullWidth
> tr").filter(":not(.last,.first)").each(function()
> {
> var oddIsTrue = "some way to test that the targeted
> node is odd.";
> if(oddIsTrue){
> $(this).addClass("alt").bind("mouseenter
> mouseleave", function(){ $
> (this).toggleClass("over"); }).bind("click",function(){ $
> (this).toggleClass("clicked")});
> }
> else{
> $(this).bind("mouseenter mouseleave",
> function(){ $
> (this).toggleClass("over"); }).bind("click",function(){ $
> (this).toggleClass("clicked")});
> }
> });
>
> However, even without doing the real check for the node being odd, it
> takes 200 ms more to do.
>
> Anybody have any ideas? Could my first attempt really be the best I
> can do?
