无法在我的 HTML 表中显示第三列(向下钻取功能 jQuery / JavaScript )

Question

我正在开发这个具有向下钻取功能的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>

Answer 1

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

function toggleVisibilitySubcategory() {
  $('table.drillDown th:nth-child(2)').toggle();
  $('table.drillDown tbody td:nth-child(2)').toggle();
}
$(function () {
  toggleVisibilitySubcategory();
  $('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 == 1) {
        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()
    });
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<table class="drillDown" border="1" align="center">
    <colgroup>
        <thead>
        <tr>
            <th>Category</th>
            <th>Subcategory</th>
        </tr>
        </thead>
    </colgroup>
    <tbody>
    <!--PARENT ROW-->
    <tr class="parent">
        <td>Category 1</td>
        <td colspan="2">$12,345.45</td>
    </tr>
    <tr class="child" >
        <td>&nbsp;</td>
        <td colspan="2">Subcategory_1 A</td>
    </tr>
    <tr class="child">
        <td>&nbsp;</td>
        <td colspan="2">Subcategory_1 B</td>
    </tr>
    <!--PARENT ROW-->
    <tr class="parent">
        <td>Category 2</td>
        <td colspan="2">$135,754.99</td>
    </tr>
    <tr class="child" >
        <td>&nbsp;</td>
        <td colspan="2">Subcategory_2 A</td>
    </tr>
    <tr class="child">
        <td>&nbsp;</td>
        <td colspan="2">Subcategory_2 B</td>
    </tr>
    <tr class="child">
        <td>&nbsp;</td>
        <td colspan="2">Subcategory_2 C</td>
    </tr>
    <tr class="parent">
        <td>Catgegory 3</td>
        <td colspan="2">$232,563.46</td>
    </tr>
    <tr class="child" >
        <td>&nbsp;</td>
        <td colspan="2">Subcategory_3 A</td>
    </tr>
    <tr class="child">
        <td>&nbsp;</td>
        <td colspan="2">Subcategory_3 B</td>
    </tr>
    <tr class="child">
        <td>&nbsp;</td>
        <td colspan="2">Subcategory_3 C</td>
    </tr>
    </tbody>
</table>

Answer 2

你的意思是这样的：https://jsfiddle.net/az0w2c8a/

$('.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();
})

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

$('.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();
})

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

$('.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();
})