Question

我理解如何使用jQuery的hide（）和show（）基于选择在表格中进行切换。这曾经非常有效地用了几百行。现在，我需要它在DOM中的5000多个条目中工作。它完全冻结了浏览器。

我的搜索带我去了learningjquery.com here

在其中解释了一个“启用/禁用样式表”方法，它应该像魅力一样工作。它确实如此，除了它只是在IE9上的魅力，只需要一秒钟（如果那样）来过滤行。在chrome上，相同操作需要15-20秒。

我遇到的问题是Chrome正在为构建此应用程序的人员广泛使用。有人可以建议我如何使这个解决方案在Chrome中运行，或者建议其他方法来处理这种情况。

我尝试了其他选项，例如.css（'display'，'none'）,. addClass（）和.removeClass（）等。似乎没什么可以让它变快。
我尝试了数据表，虽然之后非常快，但最初加载这些数据需要花费很长时间。

更新：非常感谢@ jfriend00和@Ohgodwhy。这是我在所有浏览器中使用的最终代码。

$('#tbl_product_details tbody tr').each( function() {
    var row = $(this);
    row.hasClass("tr_"+cust_id) ? row.removeClass("hide") : row.addClass("hide");
});

虽然，正如接受的答案所示，它可以通过普通的js进一步改进，并且通过在页面加载时获取dom元素，我不需要这样做。代码已经足够快了，我宁愿拥有jQuery代码。

Answer 1

根据您的评论，听起来您只想显示具有类tr_+custom_id的行并隐藏所有其他行。

此处性能的关键是确保每次操作迭代所有行不超过一次。现在，你每次操作至少要做两次。而且，你甚至可以通过在页面加载时迭代一次并在javascript中构建索引来加快速度，在这里你可以比迭代遍历DOM更快地搜索它。

作为第一个简化，您可以替换这两个传递方案：

$('#tbl_product_details tbody tr:not(.special_hide)').addClass('special_hide');
$('#tbl_product_details tbody tr.tr_'+cust_id+'').removeClass('special_hide');

这一次通过sheme：

var custRow = "tr_"+cust_id;
$('#tbl_product_details tbody tr').each(function() {
    var item = $(this);
    if (this.className.indexOf(custRow) != -1) {
        item.removeClass("special_hide");
    } else if (this.className.indexOf("special_hide") == -1) {
        item.addClass("special_hide");
    }
});

如果行本身没有改变，你可以在页面加载后将行列表预加载到持久变量中：

var rowList = $('#tbl_product_details tbody tr');

然后使用这个JS：

var custRow = "tr_"+cust_id;
rowList.each(function() {
    var item = $(this);
    if (this.className.indexOf(custRow) != -1) {
        item.removeClass("special_hide");
    } else if (this.className.indexOf("special_hide") == -1) {
        item.addClass("special_hide");
    }
});

通过删除jQuery并替换一些不太通用的普通javascript代码，可以加快速度。

可以通过在javascript中保留当前显示的行以及哪些行是给定ID来进一步加速，这样您就可以直接操作需要操作的行而无需检查每一行和每一行班级名称。用这种方式很快就可以做到这一点。

如何有效切换具有5000多个条目的表中的表行？

1 个答案: