更快地添加和刪除表上的類的方法？

我有一個有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); 
});

來源

2010-10-18 Plippie

首先我會使用change上一個複選框，無需.is(":checked")只需使用DOM .checked屬性，那麼更重要的是表現在這裏，使用單一.toggleClass()有效地交換類。

$("#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); });

You can test that version here。

來源

2010-10-18 10:07:05

這似乎有點提高了速度。我可以嘗試任何其他選項。我試過使用CSS nth-child選擇器。但它只能隱藏一列。而不是5> 27. – Plippie 2010-10-18 10:15:47

@Plippie - 嘗試更新的第二個選項與緩存選擇器，應該給你一個公平的速度提升。 – 2010-10-18 10:21:03

@Nick - 它切換它，但切換回隱藏除前5個標題以外的所有行和列。也許可以使用：var cells = $（「＃table tr」）。children（）; 並在第一個代碼中使用緩存的單元格？ – Plippie 2010-10-18 10:29:52

是的，我認爲你可以通過讓你的選擇器更加具體來加速它。即，

("#my_table td.hiddencells")

，而不是

$(".hiddencells")

同爲一個又一個。使用特定的選擇器而不是一般的選擇器是一種衆所周知的提高性能的jQuery技巧。

來源

2010-10-18 10:07:18

'this'指的是一個複選框，它不會將這些作爲子/後代。 – 2010-10-18 10:09:55

它會是這樣的： $（「td.showclass」）。toggleClass（「showclass hiddenclass」）; \t 問題是：你也有一個標題 – Plippie 2010-10-18 10:16:57

@Nick謝謝，改變了。 – 2010-10-18 10:19:01

我用複選框切換了類「hiddencolumn」的單元格。

$("checkbox").change(function() { 
    if (this.checked) { 
     $(".hiddencolumn").show(); 
    } else { 
     $(".hiddencolumn").hide(); 
    } 
});

它甚至可以使用500行。而且速度很快。

來源

2010-10-28 13:27:41 Plippie

更快地添加和刪除表上的類的方法？

回答

相關問題