javascript - Jquery隐藏/显示多个表格单元格的表格单元格

Question

我有一张表，有 15 列和大约 2000 多条记录。 现在我想隐藏/显示最后 5 列。为此，我使用以下 jQuery 语句。

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

具有“disp”类的 td 将隐藏/显示表格单元格。

但这将导致浏览器出现以下停止脚本错误。

此页面上的脚本可能正忙，或者可能已停止响应。您可以立即停止脚本，也可以继续查看脚本是否会完成。

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

如何优化它并解决浏览器错误。(浏览器:Mozilla Firefox:15.0)

Answer 1

尝试:

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

同时缓存它以供下次使用，如下所示:

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

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

这样你就可以避免 performance penalty使用用于复杂选择器的 querySelectorAll() 的方法，最好嵌套像“.class”这样的简单选择器，这样 jquery 在内部使用更高性能的 getElementsByTagName() 。

显然，如果这还不够，您应该重构您的代码，就像其他答案所建议的那样。