使用jquery隱藏表中的列

Question

我發現了一個以前建議用於滿足其需要的其他人的示例（Demo link to the suggested fix）我試圖通過使用col標記隱藏每列以簡化過程。但是當我將類添加到col標籤時，它打破了該功能，我不知道如何解決它。

我演示：Here

Answer 1

如果我理解正確的話，那麼你只需要添加類的th就像下面，

<tr> 
<th class="first_name">First Name</th> 
<th class="last_name">Last Name</th> 
<th class="email">Email</th> 
</tr> 

和修改腳本像下面一點點，

$("input:checkbox:not(:checked)").each(function() { 
    var column = $("." + $(this).attr("name")); 
    $(column).hide(); 
}); 

$("input:checkbox").click(function(){ 
    var column = $("." + $(this).attr("name")); 
    $(column).toggle(); 
}); 

DEMO：http://jsfiddle.net/8BahZ/400/

Answer 2

您似乎正在切換col標記，而不是列本身。

Answer 3

對於我而言，在Chrome中，col標記會展開爲其他標記（thead,th），因此選擇col不會爲您帶來任何效果。即使你會得到它們，你也只是在切換列標題。

無論如何，控制檯告訴你語法錯誤 - 表達式中不能有;，因爲它會終止語句。

更清潔的解決方案可能使用:nth-child：http://jsfiddle.net/8BahZ/402/。

var f = function() { 
    var index = $(":checkbox").index(this) + 1; 
    $("table > * > * > :nth-child(" + index + ")").toggle(this.checked); 
}; 

$(":checkbox").click(f).each(f); // bind handler and run it once