使用 jQuery 显示和隐藏表格列答案

【问题标题】：Show and hide table column using jQuery使用 jQuery 显示和隐藏表格列
【发布时间】：2016-08-22 19:40:10
【问题描述】：

我从一个 SO 答案中发现了这个小提琴，一旦单击按钮，它就会隐藏一个表格列。我想要的是完全相反的。我希望它默认隐藏，然后在我单击按钮时显示和隐藏（切换）。

我怎样才能做到这一点？

这是小提琴：

HTML：

<table id="foo">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Click me</button>

CSS：

#foo td {
padding: 1em;
border: 1px solid black;
}

#foo.hide2 tr > *:nth-child(2) {
    display: none;
}

【问题讨论】：

反其道而行之。创建列时隐藏列。在点击事件上显示它。

标签： javascript jquery html css

【解决方案1】：

将hide2 类初始设置为元素或执行一次切换语句。

#foo td {
  padding: 1em;
  border: 1px solid black;
}
#foo.hide2 tr > td:nth-child(2) {
  display: none;
}

<table id="foo" class="hide2">
  <!------------^^^^^^^^^^^-->
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Click me</button>

【讨论】：

谢谢！我在想它是更复杂的东西，结果添加类解决它！
一个问题：如果我想在单击一个按钮时显示它，然后在单击另一个按钮时再次隐藏它，我该怎么做？
@laker001 : 使用...classList.add('hide2'); 隐藏，使用...classList.remove('hide2'); 显示:)
@laker001 : 很高兴为您提供帮助

【解决方案2】：

我知道如何使用 JQuery 添加此行。

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

http://jsfiddle.net/bnDVS/609/

然后用 CSS 添加它：

#foo td:nth-child(2) { display: none;}

然后改变它：

#foo.hide2 tr > td:nth-child(2) {
    display: none;
}

收件人：

#foo.hide2 tr > td:nth-child(2) {
    display: table-cell;
}

http://jsfiddle.net/bnDVS/610/

【讨论】：