Can't display a third column in my HTML table (drilldown functionality jQuery / JavaScript )

Question

I'm working on this HTML Table with drilldown functionality, it works for one column but I cant display a third column, I want to click on subcategory column and display another column but Im stuck in this part .

This is my JS code

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


        });
    });

This is the HTML table.

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

Possible duplicate of [Hide/Show Column in an HTML Table](http://stackoverflow.com/questions/455958/hide-show-column-in-an-html-table) — Sheepy, Dec 18 '15 at 07:44

Gregg Duncan · Answer 1 · 2015-12-18T18:33:08.290

1

You mean like this: 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();
})

Alternatively if you need to add additional columns to your table you can use either ':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();
})

if you need to hide all columns except the first one you can use the '.not()' method.

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

edited Dec 18 '15 at 18:33

answered Dec 17 '15 at 21:54

Gregg Duncan

2,635
1
14
20

Yes, this works perfect for me! I was telling to gaemaf that I was not familiar with this property "th:nth-child(2)" But this help a lot! Thank's – kennechu Dec 17 '15 at 22:26
Hi there! One more question, What if I need an extra hidden column next to Subcategory column. – kennechu Dec 18 '15 at 17:14
@KennethEspinal see my edit for additional hidden columns. The '.not()' method is easiest as long as there are not any columns other than the first one you want to show. – Gregg Duncan Dec 18 '15 at 18:35
Hi Gregg, thank's for your time! I put my code in here https://jsfiddle.net/kennechu/b59zqc5t/2/ What I understand of the .not() method is that it will show the two hidden columns at the same time, but what I want to achive is show one column at a time, when I click on Category it will display Subcategory, when I click on a Subcategory it will display a third column, at this moment the Subcategory will be a "parent" for third column and it will continue a child column for Category. I dont know if you get my idea. – kennechu Dec 18 '15 at 19:30

gaetanoM · Accepted Answer · 2015-12-17T22:13:06.483

My solution is to create a new toggle function to hide/show last table column and use it likes in the followig snippet:

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>

Thank's a lot for your help, I'm not familiar with this property " th:nth-child(2)" but this works perfect for me. Thank you for your time!! — kennechu, Dec 17 '15 at 22:25
Also i'm gonna check the js code to understand it, if I have a question I'll come back to you, I'm kind of new to JS — kennechu, Dec 17 '15 at 22:32
The meaning of th:nth-child(2) is: Second table header while using td:nth-child(2) you get all the Second column cells. It's hard to understand at beginning this type of selector filter but you can take a look on MDN — gaetanoM, Dec 18 '15 at 00:15
Sorry, instead of MDN you have to take a look at jQuery.com --- API --- selector and filter — gaetanoM, Dec 18 '15 at 00:30

Can't display a third column in my HTML table (drilldown functionality jQuery / JavaScript )

2 Answers2