Javascript 使用has类显示/隐藏行会导致延迟和性能下降

我有一个相当大的HTML表，根据它们的类显示/隐藏行。代码按预期工作，但客户端大约有10秒的延迟/冻结。请注意，在我的示例中，部门的数量可能是动态的，因此有一些疯狂表结构的推理

这是我的

---

您的HTML结构只需要在每个

元素上增加一个类值，以指示它也属于哪个部门，另外一个类值用于总计行

它也不需要

.each

循环-您自己没有在行上迭代，因此它没有意义

然后，您的代码将变得更简单，更易于维护：

$("#deptOpt").on('change', function() {
    var dept = this.selectedIndex;
    if (dept === 0) {
        $('#scLDP tr').show();
    } else {
        $('#scLDP tr').hide();
        $('#scLDP tr.dept' + dept).show();
        $('#scLDP tr.total').show();
    }
});

请注意，将

.deptN

添加到单个

元素意味着

元素上也不再需要它

---

另一种选择是为每个部门单独设置一个

，每个部门都有自己的课程。

我认为您不需要

。每个
，因为选择器都应该找到所有内容

当删除它时，您的代码速度很快，并且似乎给出了相同的结果

var dept = $(this).prop('selectedIndex');
    //$("#scLDP > tbody > tr").each(function() {
      var x = $(this);
      switch (dept) {
       ....
       ....
          $("#scLDP > tbody > .twmdGrand").show();
          break;
      }
    //})
  })
})

请参见不带
每个
循环的小提琴► 
 当更新大量HTML时，不要每次更新都写入DOM，因为这会导致延迟。在内存中进行更改，然后在一次更新中替换整个DOM块。有几种方法可以做到这一点，即：分离相关的HTML，更新并重新附加它，克隆相关的HTML，更新克隆，然后在DOM中替换相关的HTML，等等。这是因为您的事件处理程序编写了一个大循环。为什么要在一个庞大的表中重复设置这些类（对于每个tr）？这些类都是存在的，因为这个表大部分是动态生成的，并且有很多数学计算生成一些行，即使您甚至不引用当前行（
x
）在
中。每个
loop@sm1l3y：你需要这个环吗？对不起，如果我错过了一些东西，但这不一样吗？我似乎在您的代码中得到了与我相同的结果，而不是使用循环。如果不需要循环，也不需要像我一样克隆表。
var dept = $(this).prop('selectedIndex');
    //$("#scLDP > tbody > tr").each(function() {
      var x = $(this);
      switch (dept) {
       ....
       ....
          $("#scLDP > tbody > .twmdGrand").show();
          break;
      }
    //})
  })
})