0

我找到了一个以前建议用于满足其必要需求的其他人的示例，（建议修复的演示链接）我尝试通过使用 col 标记使每个列隐藏来简化过程。然而，当我将类添加到 col 标记时，它破坏了该功能，我不知道如何修复它。

我的演示：这里

4

3 回答 3

0

如果我理解正确，那么您只需要在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();
});

演示：http: //jsfiddle.net/8BahZ/400/

于 2012-08-28T20:45:18.227 回答
0

您似乎在切换col标签而不是列本身。

于 2012-08-28T20:45:33.210 回答
0

对我来说，在 Chrome 中，一个col标签会扩展到其他标签（thead, th），所以选择col不会给你任何东西。即使你会得到它们，你也只是切换列标题。

无论如何，正如控制台告诉你的那样，你有一个语法错误——你不能;在一个表达式中出现，因为它终止了一个语句。

可能使用更清洁的解决方案：http :nth-child: //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
于 2012-08-28T20:45:35.637 回答