用jQuery淡出HTML-Table中的列：爲什麼.fadeTo（）這麼慢？

我想在我的HTML表格的列中淡出所有單元格，當我點擊此列的標題中的按鈕時。對於我運行下面的JavaScript：用jQuery淡出HTML-Table中的列：爲什麼.fadeTo（）這麼慢？

... 
myDOMElement.find(".headerIcon").bind("click", function(event){ 
    var colo = $(event.target).parent().attr("id"); // colNo is stored as Icons id 
    myDOMElement.find(".myTable").find("tr").find("#"+colo) // each tr has an id according to its colNumber 
     .each(function(index) { 
      $(this).fadeTo(0,0.2); 
     } 
    }); 
});

根據需要，但相對緩慢甚至只有200行的表這工作。

是否有更好的（更快）的方式來做到這一點？

來源

2014-10-05 Benvorth

你可以做'$（this）.fadeTo（「fast」，1）; – 2014-10-05 11:09:57

這不會比.fadeTo（0，1）;因爲第一個參數是千分之一秒的速度（見[這裏]（http://www.w3schools.com/jquery/eff_fadeto.asp）） – Benvorth 2014-10-05 11:13:40

"#"+colo是（必須是！）唯一的ID。沒有理由級聯發現 - 如果沒有，你所面臨的其他問題：爲了淡出列

... 
myDOMElement.find(".headerIcon").bind("click", function(event){ 
    var colo = $(event.target).parent().attr("id"); // colNo is stored as Icons id 
    $("#"+colo).fadeTo(0,0.2); 
    }); 
});

[編輯]

按照該意見，標識必須更好地持有因此，有關行和列的信息將是每個小區唯一：

<tr> 
    <td id="1.1">scheme is <col>.<row></td> 
    <td id="2.1"> 
    ... 

    <tr> 
    <td id="1.2"> 
    <td id="2.2"> 
    ... 

... 
myDOMElement.find(".headerIcon").bind("click", function(event){ 
    var roco= $(event.target).parent().attr("id"); 
    var col = roco.split('.')[0]; 
    var row = roco.split('.')[1]; 

    // now search all TD#s which have the clicked col (1.~) as a beginning of their ID 
    myDOMElement.find("td[id^='" + col + ".']").each(function(index) { 

      this.fadeTo(0,0.2); 

    }); 
});

也看到jQuery Attribute selector

來源

2014-10-05 11:13:37

謝謝。但是這不會淡出整個列，只有我點擊的單元格。 – Benvorth 2014-10-05 11:19:28

某些修改使其以這種方式工作，但仍然很慢：'myDOMElement.find（「。myTable」）。find（「tr」）。find（「＃」+ colo）.fadeTo（0,0.2）;' – Benvorth 2014-10-05 11:25:26

__ //每個tr根據其colNumber__有一個id。 - 顯示你生成的html，如果'myDOMElement.find（「。myTable」）。find（「tr」）。find（「＃」+ colo）'找到更多，請 – 2014-10-05 11:25:34

因爲我不需要.fadeOut（）提供的動畫我喜歡更快的方式來做到這一點：

myDOMElement.find(".myTable").find("tr").find("#"+colo).css({opacity:0.2});

來源

2014-10-05 11:35:07 Benvorth

用jQuery淡出HTML-Table中的列：爲什麼.fadeTo（）這麼慢？

回答

相關問題