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）

score 1 · Accepted Answer

尝试：

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

还要缓存它以供下次使用，如下所示：

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

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

这样，您将避免使用用于复杂选择器的性能损失，最好嵌套简单的选择器，如“.class”，以便 jquery 在内部使用更高的性能。querySelectorAll()getElementsByTagName()

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

score 1 · Accepted Answer

您共享的代码非常好。

我创建了一个 JS Fiddle 来测试这个：http: //jsfiddle.net/3z7Ze/

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

score 0 · Accepted Answer

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

3 回答 3