Способ сделать добавление и удаление классов в таблице быстрее?

Question

У меня большая таблица с 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);
});

Answer 1

Сначала я бы использовал 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); });​

Вы можете проверить эту версию здесь .

Answer 2

Я установил флажок для переключения ячеек таблицы с классом "hiddencolumn".

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

Он работает даже с 500 строками.И это быстро.

Answer 3

Да, я думаю, вы можете ускорить его, сделав вас более конкретными селекторами классов. Т.е.

("#my_table td.hiddencells")

вместо

$(".hiddencells")

То же самое для другого. Использование определенных селекторов вместо общих - это хорошо известный прием jQuery для повышения производительности.