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

不幸的是，表格无法正常工作。隐藏Queue不会隐藏tbody中相应的<th>项。

此外，在HTML中多次使用ID无效。

这是一个jsfiddle，其中有一个我相信你会做的事情的例子：

Chrome on Android

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

如何从表中隐藏/显示列？

2 个答案: