一尘不染

在HTML表中隐藏/显示列

html

我有一个包含几列的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>

阅读 1079

收藏
2020-05-10

共1个答案

一尘不染

我想做到这一点而不必在每个td上附加一个类

就个人而言,我会采用“每课时听课/课时/上课”的方法。然后,您可以通过对容器上的className的一次写入来打开和关闭列,并假设样式规则如下:

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

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

如果可以摆脱不支持IE6的困扰,则可以使用邻接选择器来避免将类属性添加到tds。或者,如果您担心使标记更整洁,则可以在初始化步骤中从JavaScript自动添加它们。

2020-05-10