Twitter bootstrap 3 如何隐藏/显示表中的列？

我试图隐藏列以及该列对应的行数据。当我点击一个特定的表格标题时

但我最终只隐藏了其他表头。我甚至不必单击特定的表头，其他表就可以消失

这就是我目前拥有的。

<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
第二频道
第三频道
fd1NoWinding

因此，当我单击totalFillingStops标题时，我想折叠/显示以下列fd1，channel 2。。。等等

---

这是我的。我不熟悉前端编程。

不幸的是，表不是这样工作的。隐藏

不会隐藏tbody中相应的

项

  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);
});

此外，在HTML中多次使用ID也是无效的

下面是一个JSFIDLE示例，我相信它可以满足您的需要：

---

我该如何准确地使用它呢？或者下面介绍如何在不编写任何javascript的情况下使用它：