Question

我从一个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;
}

Answer 1

最初将hide2类设置为元素或执行一次toggle语句。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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/

使用jQuery显示和隐藏表列

2 个答案: