テーブルから列を非表示/表示する方法は？

Question

列とその列の対応する行データを非表示にしようとしています。特定のテーブルヘッダーをクリックしたとき。

しかし、私は他のテーブルヘッダーを隠すだけで終わります。私は他の人が消えるために特定のテーブルヘッダーをクリックする必要はありません。

これは私が現時点で持っているものです。

<th data-toggle="collapse" data-target="#demo">totalFillingstops</th> 
<th id="demo" class="collapse">fd1</th> 
<th id="demo" class="collapse">channel 2</th> 
<th id="demo" class="collapse">channel 3</th> 
<th id="demo" class="collapse">fd1NoWinding</th> 

私はtotalFillingStopsヘッダーをクリックすると、だから私は、崩壊/次の列にFD1を示し、チャンネル2にしたい...など

にこれが私のjsfiddleです。私はフロントエンドプログラミングには新しいです。

Answer 1

残念ながら、テーブルはそのようには機能しません。 <th>を隠しても、tbody内の対応する<td>アイテムは隠されません。

また、HTMLでIDを複数回使用することは無効です。

https://jsfiddle.net/rjutvsdz/1/

Answer 2

function collapseColumn(index) { 
      //hide column header 
      $("table th").eq(index).addClass("hidden"); 
      $("table tr").each(function() { 
       //hide column's tds 
       $(this).find('td').eq(index).addClass("hidden"); 
      }); 
     } 
    function unCollapseColumn(index) { 
      //hide column header 
      $("table th").eq(index).removeClass("hidden"); 
      $("table tr").each(function() { 
       //hide column's tds 
       $(this).find('td').eq(index).removeClass("hidden"); 
      }); 
     } 
$("table th").eq(0).click(function(){ 
    collapseColumn(2); 
});