提高表中隱藏列的性能

Question

我在點擊它的標題時隱藏了列。我的表具有列跨度和行跨度。我使用的代碼是什麼

selector = " > tbody > tr:has(td) td:nth-child(" + Ix + ")"; 

$(tbl).find(selector).each(function() { 

    if (rIx > 0) { 
      HideAndShowEle($(this)[0], bShow, true); 
    } 

}) 

躲藏擁有超過200列和20列是非常緩慢的大表。幫我找任何其他方式來選擇特定的列更好的辦法TD

Answer 1

selector = $('table tbody').has('td').children(Ix) 

$（選擇）。每個（函數（）{

if (rIx > 0) { 
     HideAndShowEle($(this)[0], bShow, true); 
} 

}）

Answer 2

點擊標題隱藏列。

jsFiddle

$("table thead th").on("click", function(){ 
    var index = $(this).index() + 1; 
    $("table tr td:nth-child(" + index + ")").add(this).hide() 
});​ 



<table> 
    <thead> 
     <tr> 
      <th>Head 1</th> 
      <th>Head 2</th> 
      <th>Head 3</th> 
      <th>Head 4</th> 
      <th>Head 5</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
      <td>5</td> 
     </tr> 
</tbody> 
</table>​ 

Answer 3

我的優選技術爲列（假設你沒有細胞，其具有多個列跨越）是使用一個獨特的CSS類爲每列和簡單地使用類作爲其選擇器。它不必對應一個實際的CSS類，它只需要可識別。

<table class="firstTable"> 
    <tr> 
    <td class="column1"></td> 
    <td class="column2"></td> 
    <td class="column3"></td> 
    </tr> 
    <tr> 
    <td class="column1"></td> 
    <td class="column2"></td> 
    <td class="column3"></td> 
    </tr> 
</table> 

<table class="secondTable"> 
    <tr> 
    <td class="column1"></td> 
    <td class="column2"></td> 
    <td class="column3"></td> 
    </tr> 
    <tr> 
    <td class="column1"></td> 
    <td class="column2"></td> 
    <td class="column3"></td> 
    </tr> 
</table> 

現在用的共同選擇，你可以隱藏列：

$(".firstTable .column2").hide(); 

要在標題鏈接到這一點，你可以提供一個數據屬性的鏈接，以表明它是哪一列在或使用它的父母。

<a href="#" data-column="column2" data-table="firstTable" class="columnHeader">Column Header</a> 

$(".columnHeader").click(function(event) { 
    var col = $(this).attr("column"); 
    var table = $(this).attr("table"); 
    $("." + table + " ." + col).hide(); 
}); 

有這明顯的漏洞發佈的代碼主要是因爲我不知道您的具體要求或頁面結構，但這裏的概念應該是相當適應。