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/