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

Question

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

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

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

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

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

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();

通过这种方式，您将避免使用querySelectorAll()使用getElementsByTagName()用于复杂选择器，更好地嵌套简单的“.class”，因此jquery使用更多性能{{1}内部。

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

Answer 2

你分享的代码非常好。

我已经创建了一个JS小提琴来测试它：http://jsfiddle.net/3z7Ze/

在尝试显示/隐藏列之前，请确保完整加载记录。并且当时没有其他脚本运行（可能与显示/隐藏功能冲突）。

Answer 3

正如其他人已经提到的那样，你应该将结果分成多个页面。 但是如果你不能这样做，可能另一种但不是很好的方法是手动遍历每一行并异步激发切换事件。