使用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