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

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 thi开发者_开发百科s:

    $("#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?

---

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

---

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

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

---

Don't use tables if you are not displaying tabular data.

Browsers are notoriously slow when you have very large tables (due to the complexity in rendering tables). And there would be quite a lot of reflow happening with this kind of change.

---

Instead of using table structure, use the LI tag. It will speedy the html render process.

<UL style="padding: 0; list-style-type: none;">
    <LI class="a">1</LI>
    <LI class="b">2</LI>
    <LI>3</LI>
    <LI>4</LI>
</UL>

Now you can write the selector on this. This will definitely be an improvement