javascriptjqueryhtmlcss

Add action to button with jQuery


I have a table which displays data in different levels (Parent, Child, Grandson) when I click on the parent it displays new rows related to the child level and if I click on child it displays a third level as the grandson with more rows.

What I want to do is to add a button on each record with the "+" symbol so when I click it I'll see the second level and switch that button from the parent to another with the "-" symbol, to simulate the expand and collapse functionality, I want to do this for also for the child level.

Now the columns expand or collapse if I click on a row but I want to do this if I click on the buttons that I want to add.

Here's my code:

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

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

})


    $('table.drillDown').each(function() {

        var $table = $(this);
        $table.find('.parent').dblclick(function() {
            console.log( "*****Click on Parent" );
            $(this).nextUntil('.parent', ".child").toggle("fast"); 
            $(this).nextUntil('.parent', ".grandson").hide("fast");
        });
        
        $table.find('.child').dblclick(function() {
            console.log( "*****Click on child" );
            $(this).nextUntil('.child', ".grandson").toggle("fast"); 

        });

        var $childRows = $table.find('tbody tr').not('.parent').hide();
        $table.find('button.hide').dblclick(function() {
            $childRows.hide();

        });
        $table.find('button.show').dblclick(function() {
            console.log("*****Click on Child");
            $childRows.filter('.child').show();
        });
        $table.find('tr.child').dblclick(function(){
            $(this).nextUntil('.child').show()
        });

    });

And also my fiddle with the complete example

https://jsfiddle.net/ny6qcxtd/2/

Thanks!


Solution

  • changed with following fiddle
    

    fiddle