Question

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

我有一个标准的HTML表格，其中包含colgroup，thead，tbody以及正文中的几个tr和td，并希望使用CSS类来隐藏某些列。

我的CSS类看起来像这样：

.hideAll
{
    display:none;
}

申请此课程的最佳/正确方法是什么？在colgroup中的col，在thead中的col，在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>

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

Answer 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

Answer 2

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

无论如何，你可以将给定的类设置为你的元素：

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

然后如果要删除该类，代码将为：

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

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

但是如果你是jQuery世界的新手，将来你不需要这么多，你可以考虑学习KnockoutJS，这会让你从纯粹的dom管理中提升。

希望有所帮助：）

Answer 3

你几乎可以叠加它们并添加课程。

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

但这实际上取决于你想隐藏哪一个。

如果这只是为了“尝试”，那么这很好。但是如果有一个大型项目，你可以考虑在表格中添加某种类，然后将所有元素定位在页面之外。

Answer 4

http://jsfiddle.net/L4TEq/

我创建了一个简单的脚本，允许您隐藏整个列，只是为列class="hidden"提供。

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

它基于元素index。通过这种方式，您可以使用相同的列索引隐藏所有相应的th和tds。

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

4 个答案: