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

使用Jquery隐藏表中的列

3 个答案: