Question

I have one table, which having 15 columns and around 2000+ records.
Now I want to hide/show last 5 columns. To do that I use following jQuery Statement.

    $("table.border-box td.disp").toggle();

td having “disp” class will hide/show table cells.

But this will result in Browser with following stop script error.

A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.

Script: http://localhost:8080/XXX/resources/js/jquery/jquery-1.6.4.js:4055

How can I optimize this and also solve browser error.(Browser: Mozilla Firefox:15.0)

Answer 1

Try with:

$("table.border-box").find(".disp").toggle();

Also cache it for using it another time, like this:

tds = $("table.border-box").find(".disp");//only do expensive operation once

tds.toggle();
...
...
tds.toggle();

as this way you will be avoiding the performance penalty of using querySelectorAll() which is used for complex selectors, better to nest simple ones like “.class” so jquery uses the more performance getElementsByTagName() internally.

Obviously if this is not enough you should refactor your code, like other answers suggests.