在 HTML 表格中隐藏/显示列

Question

我有一个包含多个列的 HTML 表，我需要使用 jQuery 实现列选择器。当用户单击复选框时，我想隐藏/显示表中的相应列。我想在不将类附加到表中的每个 td 的情况下执行此操作，有没有办法使用 jQuery 选择整个列？以下是 HTML 的示例。

 <table>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>

原文由 Brian Fisher 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想在不为每个 td 附加一个类的情况下这样做

就个人而言，我会采用 class-on-each-td/th/col 方法。然后，您可以使用对容器上的 className 的单次写入来打开和关闭列，假设样式规则如下：

 table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

这将比任何 JS 循环方法都快；对于非常长的表，它会对响应能力产生重大影响。

如果你可以摆脱不支持 IE6，你可以使用邻接选择器来避免必须将类属性添加到 tds。或者，如果您关心的是使标记更清晰，您可以在初始化步骤中从 JavaScript 自动添加它们。

原文由 bobince 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

使用隐藏第二列的 jQuery 的一行代码：

 $('td:nth-child(2)').hide();

如果你的表有 header(th)，使用这个：

 $('td:nth-child(2),th:nth-child(2)').hide();

来源： 用一行 jQuery 代码隐藏表列

jsFiddle 测试代码：http: //jsfiddle.net/mgMem/1/

---

如果你想看到一个好的用例，看看我的博客文章：

使用 jQuery 隐藏表列并根据值为行着色。

原文由 Leniel Maccaferri 发布，翻译遵循 CC BY-SA 3.0 许可协议