Can'；t在我的HTML表中显示第三列（向下搜索功能jQuery/JavaScript）

我正在使用这个HTML表格的向下搜索功能，它只适用于一列，但我无法显示第三列，我想单击子类别列并显示另一列，但我被困在这部分

这是我的JS代码

         function toggleVisibilitySubcategory() {

        $('table.drillDown th:nth-child(2)').toggle();
        $('table.drillDown tbody td:nth-child(2)').toggle();
    }

    function toggleVisibilityItem() {

        $('table.drillDown th:nth-child(3)').toggle();
        $('table.drillDown tbody td:nth-child(3)').toggle();
    }

    $(function () {
        toggleVisibilitySubcategory();
        toggleVisibilityItem();
        $('table.drillDown').each(function() {

            var $table = $(this);
            $table.find('.parent').click(function() {
                console.log( "click on parent" );
                $(this).nextUntil('.parent').toggle();

                if ($(this).find("td:hidden").length > 0) {
                    toggleVisibilitySubcategory();
                }

            });

            var $childRows = $table.find('tbody tr').not('.parent').hide();
            $table.find('button.hide').click(function() {
                $childRows.hide();
            });
            $table.find('button.show').click(function() {
                $childRows.filter('.child').show();
            });
            $table.find('tr.child').click(function(){
                $(this).nextUntil('.child').show()
            });


        });
    });

这是HTML表

 <table class="drillDown" border="1" align="center">

    <thead>
        <th>Category</th>
        <th>Subcategory</th>
        <th>Item</th>
        <th>LW</th>
    </thead>

    <tbody>
    <!--PARENT ROW-->
     <tr class="parent">
      <td>Category 1</td>
      <td></td>
      <td></td>
      <td></td>
     </tr>

     <tr class="child" >
      <td>&nbsp;</td>
      <td>Subcategory_1 A
      <td>a</td>
      <td></td>
     </tr>

     <tr class="child">
      <td>&nbsp;</td>
      <td>Subcategory_1 B</td>
      <td>a</td>
      <td></td>
     </tr>
    </tbody>
</table>

类别
子类别
项目
LW
第一类
子类别_1 A
A.
子类别_1 B
A.

你的意思是：

或者，如果需要向表中添加其他列，可以使用“：nth-child（）”或

如果需要隐藏除第一列以外的所有列，可以使用“.not（）”方法

---

我的解决方案是创建一个新的切换函数来隐藏/显示最后一个表列，并在下面的代码段中使用它：

函数切换可见性子类别（）{
$（'table.drillDown th:n个子项（2）'）.toggle（）；
$（'table.drillDown tbody td:n子项（2）'）.toggle（）；
}
$（函数（）{
切换可见性子类别（）；
$（'table.drillDown'）。每个（函数（）{
var$表=$（此）；
$table.find（'.parent'）。单击（函数（）{
console.log（“单击父项”）；
$（this.nextUntil（'.parent'）.toggle（）；
if（$（this）.find（“td:hidden”）.length==1）{
切换可见性子类别（）；
}
});
var$childRows=$table.find（'tbody tr'）。not（'.parent'）。hide（）；
$table.find（'button.hide'）。单击（函数（）{
$childRows.hide（）；
});
$table.find（'button.show'）。单击（函数（）{
$childRows.filter（'.child'）.show（）；
});
$table.find（'tr.child'）。单击（函数（）{
$（this.nextUntil（'.child'）.show（）
});
});
});

类别
子类别
第一类
$12,345.45
子类别_1 A
子类别_1 B
第2类
$135,754.99
子类别_2 A
子类别_2 B
子类别_2 C
Catgegory 3
$232,563.46
子类别_3 A
子类别_3 B
子类别_3 C
您尝试了什么？您的html已关闭，并且在Colgroups之后关闭。感谢您的编辑！非常感谢你的帮助，我不熟悉这个“th:nth child（2）”的属性，但这个对我来说非常适合。谢谢你抽出时间！！另外，我会检查js代码以了解它，如果我有问题，我会回来问你，我对js有点陌生th:nth child（2）的意思是：第二个表头，而使用td:nth child（2）时，你会得到所有第二列单元格。开始时很难理解这种类型的选择器过滤器，但是你可以看看MDSensory，而不是MDN，你必须看看jQuery.com--API--selector and filter谢谢你的时间：）是的，这非常适合我！我告诉gaemaf我不熟悉这个属性“th:nth child（2）”，但这很有帮助！谢谢你！还有一个问题，如果我在子类别列旁边需要一个额外的隐藏列，该怎么办。@请参阅我的编辑以了解其他隐藏列。“.not（）”方法是最简单的，只要除了第一列之外没有其他列要显示。嗨，格雷格，谢谢你的时间！我把我的代码放在这里，我对.not（）方法的理解是，它将同时显示两个隐藏列，但我想要实现的是一次显示一列，当我单击类别时，它将显示子类别，当我单击子类别时，它将显示第三列，此时子类别将是“父”对于第三列，它将继续作为类别的子列。我不知道你是否明白我的意思。
$('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();

$('.drillDown tr td:first-child, .drillDown tr th:first-child').click(function(){
    $('.drillDown tr td:last-child, .drillDown tr th:last-child').show();
})

$('.drillDown tr td:nth-child(2), .drillDown tr th:nth-child(2)').hide();

$('.drillDown tr td:first-child, .drillDown tr th:first-child').click(function(){
    $('.drillDown tr td:nth-child(2), .drillDown tr th:nth-child(2)').show();
})

$('.drillDown tr td, .drillDown tr th').not(':first-child').hide();

    $('.drillDown tr td:first-child, .drillDown tr th:first-child').click(function(){
    $('.drillDown tr td, .drillDown tr th').not(':first-child').show();
})