jquery - 在 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>

Answer 1

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

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

如果你的表有标题(th)，使用这个:

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

来源:Hide a Table Column with a Single line of jQuery code

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

---

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

Hide a table column and colorize rows based on value with jQuery .