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

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this 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>