html中怎样隐藏列,关于jquery：隐藏/显示HTML表中的列

我有一个包含几列的HTML表，我需要使用jquery实现一个列选择器。 当用户单击复选框时，我要隐藏/显示表中的相应列。 我想在不将类附加到表中的每个td的情况下执行此操作，是否可以使用jquery选择整个列？ 以下是HTML的示例。

Header 1Header 2Header 3

Column1Column2Column3Column1Column2Column3Column1Column2Column3Column1Column2Column3

Hide/Show Column 1

Hide/Show Column 2

Hide/Show Column 3

希望以下网站对您有所帮助：fiendish.demon.co.uk/html/javascript/hidetablecols.html

我使用jQuery实现了该解决方案，并且对我来说效果非常好：http：//www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

每个用户344059的评论，这是断开的链接的Web存档http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html

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

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

如果您的表具有header(th)，请使用此命令：

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

资料来源：用单行jQuery代码隐藏表格列

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

如果您想查看一个好的用例，请看一下我的博客文章：

隐藏表列，并使用jQuery根据值对行着色。

顺便说一句，在示例中没有，是否没有忽略colspans的问题？好，如果您不使用它们。还有另一个相关问题：stackoverflow.com/questions/1166452/

我必须将tbody添加到选择器中，以避免用寻呼机隐藏页脚：$(。webgrid tbody td：nth-??child(1)，.webgrid th：nth-??child(1))。hide();

@KimR这可能有助于解决colspan问题stackoverflow.com/questions/9623601/

我不知道为什么，但是我不得不使用nth-of-type来使其工作。例如：$(table td：nth-??of-type(2))。hide();

@LeopoldoSanczyk您使用的是Safari吗？似乎需要第n个类型

@ykay我忘了提及我使用的是Firefox。从日期来看，是32.0.X还是封闭版本。

@LeopoldoSanczyk好吧，我问，因为当客户要求他的网站在野生动物园工作时，我碰到了这一点。 Firefox也可能一样

注意：使用$(.mycol).closest(th).index()获取索引时，您必须添加1，因为nth-child从1开始！所以colIdx = $(.mycol).closest(th).index() + 1

I would like to do this without attaching a class to every td

就我个人而言，我会采用"每课时上课/上课/上课"的方法。然后，您可以通过对容器上的className的一次写操作