代码之家 › 专栏 › 技术社区 › Plippie

一种加快在表上添加和删除类的方法?

jquery-selectors html-table css jquery

Plippie · 技术社区 · 15 年前

我有一个模式开关(复选框),可以将表的视图从前5列(简单)切换到27列(专家)并返回。

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

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

如果表中有大量行,则在切换之前会有一段时间。有没有更快的方法来替换类。或者让上面的代码更快?

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

3 回复 | 直到 9 年前

Nick Craver 15 年前

首先我要用 change 在复选框上,不需要 .is(":checked") .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 .

Nikita Rybak 15 年前

是的,我认为你可以通过让你的类选择器更具体来加速它。即。,

("#my_table td.hiddencells")

$(".hiddencells")

另一个也一样。使用特定的选择器而不是常规选择器是改善性能的众所周知的jQuery技巧。

Plippie 15 年前

我用复选框来解决,用类“hiddencolumn”来切换表单元格。

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

它甚至可以工作500行。而且很快。