使用jQuery顯示和隱藏表列使用jQuery

Question

我從一個SO回答中找到了這個小提琴，一旦點擊一個按鈕就隱藏了一個表列。我想要的是完全相反的。我希望它在默認情況下隱藏，然後在單擊按鈕時顯示並隱藏（切換）。

我該如何做到這一點？

這裏的小提琴：

FIDDLE

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類最初的元素或執行一次撥動聲明。

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

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/