Jquery 一种使在表上添加和删除类更快的方法？

我有一个很大的表，有27列，5到100行。 我有一个模式开关（复选框），它将表的视图从前5列（简单）切换到27列（专家）再切换回来

目前，我使用以下jquery方法在模式之间切换：

 $("#ToggleTableCells").click(function(){
    if($(this).is(':checked')){
            $(".hiddencells").removeClass("hiddencells").addClass("showcells");
            }else{
            $(".showcells").removeClass("showcells").addClass("hiddencells");
    }
});

如果表有大量行，则在切换前需要一段时间。有没有更快的方法来替换类。还是让上面的代码更快

使用css gt方法部分有效，但向后切换会隐藏所有表行：

$("#toggleTableCells").change(function() {  
                if(this.checked){                   
                $("#Table tr td:gt(4), #Table tr th:gt(4)").show();             
                }else{                      
                $("#Table tr td:gt(4), #Table tr th:gt(4)").hide(); 
                }
    });

尼克的第一个答案似乎是最好的解决方案：

$("#ToggleTableCells").change(function(){
    if(this.checked){
        $(".hiddencells").toggleClass("hiddencells showcells");
    }else{
        $(".showcells").toggleClass("showcells hiddencells");
    }
});

var cells = $();
$("#Table tr").each(function() { cells = cells.add($(this).children(":gt(4)")); });
$("#ToggleTableCells").change(function(){
cells.toggle(this.checked);
});

尽管我尝试将尼克和尼基塔的答案结合起来，但并没有明显提高速度

最终解决方案：

$("#ToggleTableCells").change(function(){
    if(this.checked){
        $(".hiddencells").toggleClass("hiddencells showcells");
    }else{
        $(".showcells").toggleClass("showcells hiddencells");
    }
});

var cells = $();
$("#Table tr").each(function() { cells = cells.add($(this).children(":gt(4)")); });
$("#ToggleTableCells").change(function(){
cells.toggle(this.checked);
});

---

首先，我会在复选框上使用

change

，不需要只使用DOM属性，然后更重要的是，为了提高性能，使用一个单独的属性来有效地交换类

$("#ToggleTableCells").change(function(){
  if(this.checked){
    $(".hiddencells").toggleClass("hiddencells showcells");
  }else{
    $(".showcells").toggleClass("showcells hiddencells");
  }
});

不过，直接切换可能更好，请尝试：

var cells = $();
$("#myTable tr").each(function() { cells = cells.add($(this).children().slice(5)); });
$("#ToggleTableCells").change(function(){ cells.toggle(this.checked); });​

---

.

首先，我会在复选框上使用

change

，不需要只使用DOM属性，然后更重要的是，为了提高性能，在这里，使用单个属性可以有效地交换类

$("#ToggleTableCells").change(function(){
  if(this.checked){
    $(".hiddencells").toggleClass("hiddencells showcells");
  }else{
    $(".showcells").toggleClass("showcells hiddencells");
  }
});

不过，直接切换可能更好，请尝试：

var cells = $();
$("#myTable tr").each(function() { cells = cells.add($(this).children().slice(5)); });
$("#ToggleTableCells").change(function(){ cells.toggle(this.checked); });​

---

.

是的，我想你可以通过让你的类选择器更具体来加快速度。即

("#my_table td.hiddencells")

而不是

$(".hiddencells")

---

另一个也一样。使用特定的选择器而不是一般的选择器是众所周知的jQuery技巧，可以提高性能。

是的，我认为可以通过使类选择器更具体来加快速度。即

("#my_table td.hiddencells")

而不是

$(".hiddencells")

---

另一个也一样。使用特定的选择器而不是一般的选择器是众所周知的jQuery技巧，可以提高性能。

我通过复选框将表单元格切换为类“hiddencolumn”解决了这个问题

---

它甚至可以处理500行。而且速度很快。

我通过复选框将表格单元格切换为类“hiddencolumn”

---

它甚至可以处理500行。而且速度很快。

这个

引用了一个复选框，它不会将这些作为子项/子项。然后它会是这样：$（$td.showclass”）.toggleClass（“showclass hiddenclass”）；问题是：您还有一个头@plipie$（“td.showclass，th.showclass”）没有问题，如果您有很多其他元素（div、span、text节点等），那么不让jQuery遍历它们应该会有所帮助。

这是一个复选框，它不会将这些作为子代/子代。它将是这样：$（$td.showclass”）.toggleClass（“showclass hiddenclass”）；问题是：您还有一个头@plipie$（“td.showclass，th.showclass”）没有问题。如果您有很多其他元素（div、span、text节点等），那么不让jQuery遍历它们应该会有所帮助。这似乎在某种程度上提高了速度。我可以试试其他的选择。我尝试使用cssnth子选择器。但它只能隐藏一列。不是5>27。@plipie-使用缓存选择器尝试更新的第二个选项，应该会给您一个公平的速度提升。@Nick-它会将其关闭，但当切换回时，它会隐藏除前5个标题以外的所有行和列。可能使用：var cells=$（“#table tr”）.children（）；并在第一个代码中使用缓存的单元格？@Nick nice-code-example！一局切换后，它的反应非常快。我不认为它可以比这个更快。我必须回到细胞阵列解决方案。当您最多有10行时，它工作正常。如果您有超过20行，任何版本的IE都会在我的200行乘以18列的表中删除一个“script is taking a long time error”错误jqeury source中的数组函数调用830576 times！然而，在所有其他浏览器中，它都可以正常工作。但“单元”阵列解决方案仍然不是可行之路。这似乎在一定程度上提高了速度。我可以试试其他的选择。我尝试使用cssnth子选择器。但它只能隐藏一列。不是5>27。@plipie-使用缓存选择器尝试更新的第二个选项，应该会给您一个公平的速度提升。@Nick-它会将其关闭，但当切换回时，它会隐藏除前5个标题以外的所有行和列。可能使用：var cells=$（“#table tr”）.children（）；并在第一个代码中使用缓存的单元格？@Nick nice-code-example！一局切换后，它的反应非常快。我不认为它可以比这个更快。我必须回到细胞阵列解决方案。当您最多有10行时，它工作正常。如果您有超过20行，任何版本的IE都会在我的200行乘以18列的表中删除一个“script is taking a long time error”错误jqeury source中的数组函数调用830576 times！然而，在所有其他浏览器中，它都可以正常工作。但“单元”阵列解决方案仍然不是一条出路。