jQuery / CSS：隐藏列的正确方法

Posted 2023-05-08

【中文标题】jQuery / CSS：隐藏列的正确方法

【英文标题】：jQuery / CSS: proper way to hide a column

【发布时间】：2013-12-08 06:50:36

【问题描述】：

我对 jQuery 和 CSS 很陌生，希望有人可以帮助我解决以下问题：

我有一个标准的 html 表格，其中有一个 colgroup、thead、tbody 和几个 tr's 和 td's 在正文中，我想使用 CSS 类来隐藏某些列。

我的 CSS 类如下所示：

.hideAll

    display:none;

应用此类的最佳/正确方法是什么？到 colgroup 中的 col，到 thead 中的 th，到 tbody 中的 tr 或 td 或同时到其中几个？

我的桌子看起来像这样：

<table>
    <colgroup>
       <col />
       <col />
       <col />
    </colgroup>
    <thead>
        <tr><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
    </tbody>
</table>

非常感谢您提供的任何帮助，蒂姆。

【参考方案1】：

如果您知道要隐藏的确切列。给它一个类名。

<table>
<colgroup>
   <col />
   <col />
   <col />
</colgroup>
<thead>
    <tr><th class="target">AAA</th><th>BBB</th><th>CCC</th></tr>
</thead>
<tbody>
    <tr><td class="target">111</td><td>111</td><td>111</td></tr>
    <tr><td class="target">222</td><td>222</td><td>222</td></tr>
    <tr><td class="target">333</td><td>333</td><td>333</td></tr>
</tbody>

然后您可以使用 jquery addClass() 方法将您的 hideAll 类添加到它们。

$('.target').addClass('hideAll');

Demo

【讨论】：

不客气。顺便说一句，如果您想删除课程，请使用@andrea.spot 建议的内容。

【参考方案2】：

就像@drip 已经告诉你的那样，为你的表的孩子添加一些类名会很有用。

无论如何，您都可以将给定的类设置为您的元素，如下所示：

$('myElementSelector').addClass('hideAll');

然后如果你想删除类，代码将是：

$('myElementSelector').removeClass('hideAll');

对于jQuery选择器，我建议你阅读jQuery selectors' documentation。

但是如果你是 jQuery 世界的新手，并且在未来你不会那么需要它，你可以考虑学习 KnockoutJS，它将你从纯粹的 dom 管理中提升出来。

希望对你有帮助:)

【讨论】：

感谢您的快速回复 - 这很有帮助！

很好的回答人！我想我会看看那个 KnockoutJS ;)

很高兴听到你们俩的消息……再见！

【参考方案3】：

您几乎可以将它们堆叠并添加类。

$('col,tr,th,td').addClass('hideAll')

但这真的取决于你到底想隐藏哪一个。

如果这只是为了“尝试”，那就太好了。但是，如果有一个大型项目，您可能会考虑向表中添加某种类并将其作为目标，而不是页面中的所有元素。

【参考方案4】：

http://jsfiddle.net/L4TEq/

我制作了一个简单的脚本，它允许您隐藏整个列，只给列class="hidden"。

这可能有助于并简化您的工作。

它基于元素index。这样就可以隐藏所有对应的具有相同索引的列的ths和tds。