jQuery.toggle() extremely slow on many <TR> elements

Question

I have a table like this:

<table>
    <tr class="a"><td></td></tr>
    <tr class="b"><td></td></tr>
</table>

There are nearly 800 rows and most of them of class a. Now I want to toggle these rows like this:

    $("#toggle_a").click(function(){
        $("tr.a").toggle();
    });
    $("#toggle_b").click(function(){
        $("tr.b").toggle();
    });

But this is really extremely slow and most of the time the browser wants to stop the action.

Has anybody an idea how to make this thing faster and usable?

Answer 1

Seems because jquery searching element by class name..

Note: The class selector is among the slowest selectors in jQuery; in IE it loops through the entire DOM. Avoid using it whenever possible.

Also check this article

Answer 2

I had a similar problem but with few lines, about 200.

I used .hide() and .show() and now this almost instantaneous.