Jquery - Expand/Collapse table rows by level

user_15764591 0
Viewed 287

Given the following table/code, I'd like to add or adjust three items. I don't know Jquery well enough as I just learn programming within two months and this code was refer from other places and I made some adjustment for it. Anyone who could help me I will be very appreciate, I have try this expand and collapse function for two weeks but I still cannot get the result that I want so I post here to ask for help.

Here are the three items:

  1. For the parent that do not have child will not show '+' when I click on the hide all, for example in my fiddle, the capital share and capital contribution does not have child below it but it still appear '+'. Please see the image attached [Current Result & Expected Result]1
  2. When I show all, I want to show '-' for the parent or child that able to collapse as a group. Please see the image attached [Expected Output Result]2
  3. After I click Hide All, when I click expand the Fixed Assets, It should only appear Building and Computer, not including the child of Building and Computer. When I click expand on the building, then it only expand the accum. dprn building. Please see the image attached [Expected Result]3

Here is the table I'm using:

$('.collapse').on('click', function () {
            //console.log($(this).attr('data-depth'));
            var findChildren = function (tr) {
                var depth = tr.data('depth');
                return tr.nextUntil($('tr').filter(function () {
                    return $(this).data('depth') <= depth;
                }));
            };

            var children = findChildren($(this));
            if ($(children).is(':visible')) {
                $(this).addClass("closed");
                $(children).hide();
            } else {
                $(this).removeClass("closed");
                $(children).show();
                var children = findChildren($(".closed"));
                $(children).hide();
            }

        });

        $('#show_all').on('click', function () {
            $("#mytable tr.collapse").removeClass("closed").show();
        });
        $('#hide_all').on('click', function () {
            $("#mytable tr.collapse:not([data-depth='0'])").hide();
            $("#mytable tr.collapse.level0").addClass("closed");
        });
table td,
th {
  border: 1px solid #eee;
  font-family: Arial;
  font-size: 16px;
}
.level0 td:first-child {
    padding-left: 10px;
}

.level1 td:first-child {
    padding-left: 40px;
}

.level2 td:first-child {
    padding-left: 70px;
}

.level3 td:first-child {
    padding-left: 100px;
}
.level4 td:first-child {
    padding-left: 130px;
}

.level5 td:first-child {
    padding-left: 160px;
}
.closed td:first-child::before {
    content: "+";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="show_all"><p>Show all</p></button>
<button id="hide_all"><p>Hide all</p></button>
<table class="table table-bordered" id="mytable" style="border-collapse: collapse">
 <thead>
    <tr>
      <th colspan="5">Name</th>
      <th>DR</th>
      <th>CR</th>
    </tr>
    <tr data-depth="0" class="collapse level0">
    <td colspan="5">CAPITAL SHARE</td>
    <td>10,000</td>
    <td>0.00</td>
  </tr>
  <tr data-depth="0" class="collapse level0">
    <td colspan="5">CAPITAL CONTRIBUTION </td>
    <td>200,000</td>
    <td>12,000</td>
  </tr>
  <tr data-depth="0" class="collapse level0">
    <td colspan="5">FIXED ASSETS</td>
    <td>200,320</td>
    <td>0.00</td>
  </tr>
  <tr data-depth="1" class="collapse level1">
    <td colspan="5">BUILDING</td>
    <td>3,222,000</td>
    <td>0.00</td>
  </tr>

  <tr data-depth="2" class="collapse level2">
    <td colspan="5">ACCUM. DPN-BUILDING</td>
    <td>0.00</td>
    <td>0.00</td>
  </tr>
  <tr data-depth="1" class="collapse level1">
    <td colspan="5">COMPUTER</td>
    <td>320,000</td>
    <td>0.00</td>
  </tr>

  <tr data-depth="2" class="collapse level2">
    <td colspan="5">ACCUM. DPN-COMPUTER</td>
    <td>0.00</td>
    <td>0.00</td>
  </tr>
  <tr data-depth="3" class="collapse level3">
    <td colspan="5">ACCUM. DPN-COMPUTER</td>
    <td>0.00</td>
    <td>0.00</td>
  </tr>
  <tr data-depth="3" class="collapse level3">
    <td colspan="5">ACCUM. DPN-COMPUTER</td>
    <td>0.00</td>
    <td>0.00</td>
  </tr>
  <tr data-depth="0" class="collapse level0">
    <td colspan="5">INVESTMENT</td>
    <td>0.00</td>
    <td>0.00</td>
  </tr>

  <tr data-depth="1" class="collapse level1">
    <td colspan="5">INVESTMENT IN ABC COMPANY</td>
    <td>0.00</td>
    <td>0.00</td>
  </tr>
  </thead>
</table>

css html jquery
2 Answers

You are missing one thing here. When you are adding a ".closed" class on collapse you are adding it to all the "#mytable tr.collapse.level0". Instead, write an (if statement) and only add ".closed" class to those elements who have a sibling whose class contains ".level1".

$("#hide_all").on("click", function() {
  $("#mytable tr.collapse:not([data-depth='0'])").hide();
  let a = document.querySelectorAll("#mytable tr.collapse.level0");
  for (const iterator of a) {
    if (iterator.nextSibling.nextSibling) {
      if (iterator.nextSibling.nextSibling.className.includes("level1")) {
        $(iterator).addClass("closed");
      }
    }
  }
})
user_157570160

At the end, I finally found a plugins of treegrid that is more easily for me to use and understand. Anyone who need to use treegrid or treeview of table can use the plugins. TreeGrid Plugins. If anyone want to use my above sample also can, but the disadvantage is the page will die when load data >300rows.

user_157645910
Related