隐藏/显示 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>
I have an HTML table with several columns and I need to implement a column chooser using jQuery. When a user clicks on a checkbox I want to hide/show the corresponding column in the table. I would like to do this without attaching a class to every td in the table, is there a way to select an entire column using jQuery? Below is an example of the 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
使用 jQuery 的一行代码隐藏第二列：
如果您的表有标题，请使用此：
来源：用一行 jQuery 代码隐藏表格列
jsFiddle 测试代码： http://jsfiddle.net/mgMem/1/
如果您想看到一个好的用例，请查看我的博客文章：
使用 jQuery 隐藏表格列并根据值对行进行着色。
One line of code using jQuery which hides the 2nd column:
If your table has header(th), use this:
Source: Hide a Table Column with a Single line of jQuery code
jsFiddle to test the code: http://jsfiddle.net/mgMem/1/
If you want to see a good use case, take a look at my blog post:
Hide a table column and colorize rows based on value with jQuery.
，就我个人而言，我会使用 class-on-each-td/th/col 方法。 然后，您可以使用对容器上的 className 进行单次写入来打开和关闭列，假设样式规则如下：
这将比任何 JS 循环方法更快； 对于很长的桌子，它可以对响应能力产生显着的影响。
如果您可以不支持 IE6，则可以使用邻接选择器来避免将类属性添加到 tds。 或者，如果您关心的是使标记更清晰，您可以在初始化步骤中自动从 JavaScript 添加它们。
Personally, I would go with the the class-on-each-td/th/col approach. Then you can switch columns on and off using a single write to className on the container, assuming style rules like:
This is going to be faster than any JS loop approach; for really long tables it can make a significant difference to responsiveness.
If you can get away with not supporting IE6, you could use adjacency selectors to avoid having to add the class attributes to tds. Or alternatively, if your concern is making the markup cleaner, you could add them from JavaScript automatically in an initialisation step.
这是一个功能更齐全的答案，它在每列的基础上提供一些用户交互。 如果这将是一种动态体验，则每列上都需要有一个可单击的切换，指示隐藏该列的能力，然后提供一种恢复以前隐藏的列的方法。
在 JavaScript 中这看起来像这样：
为了支持这一点，我们将向表中添加一些标记。 在每个列标题中，我们可以添加类似的内容，以提供可点击内容的视觉指示器。
我们将允许用户通过表页脚中的链接恢复列。 如果默认情况下它不是持久的，那么在标头中动态切换它可能会在桌子上乱七八糟，但您确实可以将它放在您想要的任何地方：
这是基本功能。 下面是一个演示，其中还充实了一些内容。 您还可以向按钮添加工具提示以帮助阐明其用途，将按钮的样式设置为与表标题更有机的样式，并折叠列宽以添加一些（有点奇怪的）CSS 动画以使过渡少一点神经兮兮的。
jsFiddle 中的工作演示 堆栈片段：
Here's a little more fully featured answer that provides some user interaction on a per column basis. If this is going to be a dynamic experience, there needs to be a clickable toggle on each column that indicates the ability to hide the column, and then a way to restore previously hidden columns.
That would look something like this in JavaScript:
To support this, we'll add some markup to the table. In each column header, we can add something like this to provide a visual indicator of something clickable
We'll allow the user to restore columns via a link in the table footer. If it's not persistent by default, then toggling it on dynamically in the header could jostle around the table, but you can really put it anywhere you'd like:
That's the basic functionality. Here's a demo below with a couple more things fleshed out. You can also add a tooltip to the button to help clarify its purpose, style the button a little more organically to a table header, and collapse the column width in order to add some (somewhat wonky) css animations to make the transition a little less jumpy.
Working Demo in jsFiddle & Stack Snippets:
您可以使用 colgroups：
然后您的脚本可以仅更改所需的
类。you could use colgroups:
your script then could change just the desire
<col>class.以下应该做到这一点：
这是未经测试的代码，但原则是您选择每行中与从复选框名称中提取的所选索引相对应的表格单元格。 您当然可以使用类或 ID 来限制选择器。
The following should do it:
This is untested code, but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name. You could of course limit the selectors with a class or an ID.
当然，对于 支持的浏览器
nth-child:<代码>表 td:nth-child(2) { 显示：无； }
这适用于 IE9 及更高版本。
对于您的用例，您需要几个类来隐藏列：
等等...
And of course, the CSS only way for browsers that support
nth-child:table td:nth-child(2) { display: none; }This is for IE9 and newer.
For your usecase, you'd need several classes to hide the columns:
ect...
以下内容基于 Eran 的代码，并进行了一些细微的更改。 测试了一下，似乎在 Firefox 3、IE7 上运行良好。
The following is building on Eran's code, with a few minor changes. Tested it and it seems to work fine on Firefox 3, IE7.
没有课？ 您可以使用标签，然后：
并向他们展示使用：
Without class? You can use the Tag then:
And to show them use: