Collapsing tree table using plain javascript

Question

I am trying to create a collapsing tree table structure. When i click tr child tr open up and so on. This is a folder structure to be represented as tree in UI. I used the example showed in this How to create a collapsing tree table in html/css/js?

It works well but i cant use jquery because its a legacy aplication and strictly plain JS alone. Can someone help convert this jquery to plain JS please.

<table id="mytable">
    <tr data-depth="0" class="collapse level0">
        <td><span class="toggle collapse"></span>Item 1</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td><span class="toggle"></span>Item 2</td>
        <td>123</td>
    </tr>
    <tr data-depth="2" class="collapse level2">
        <td>Item 3</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td>Item 4</td>
        <td>123</td>
    </tr>
    <tr data-depth="0" class="collapse collapsable level0">
        <td><span class="toggle collapse"></span>Item 5</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse collapsable level1">
        <td>Item 6</td>
        <td>123</td>
    </tr>
</table>

jquery

$(function() {
    $('#mytable').on('click', '.toggle', function () {
        //Gets all <tr>'s  of greater depth below element in the table
        var findChildren = function (tr) {
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function () {
                return $(this).data('depth') <= depth;
            }));
        };

        var el = $(this);
        var tr = el.closest('tr'); //Get <tr> parent of toggle button
        var children = findChildren(tr);

        //Remove already collapsed nodes from children so that we don't
        //make them visible. 
        //(Confused? Remove this code and close Item 2, close Item 1 
        //then open Item 1 again, then you will understand)
        var subnodes = children.filter('.expand');
        subnodes.each(function () {
            var subnode = $(this);
            var subnodeChildren = findChildren(subnode);
            children = children.not(subnodeChildren);
        });

        //Change icon and hide/show children
        if (tr.hasClass('collapse')) {
            tr.removeClass('collapse').addClass('expand');
            children.hide();
        } else {
            tr.removeClass('expand').addClass('collapse');
            children.show();
        }
        return children;
    });
});

CSS

table td {
    border: 1px solid #eee;
}
.level1 td:first-child {
    padding-left: 15px;
}
.level2 td:first-child {
    padding-left: 30px;
}

.collapse .toggle {
    background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif");
}
.expand .toggle {
    background: url("http://mleibman.github.com/SlickGrid/images/expand.gif");
}
.toggle {
    height: 9px;
    width: 9px;
    display: inline-block;   
}

HVD · Accepted Answer · 2019-12-16T10:32:09.510

Converted. Try this see if it's work:

https://jsfiddle.net/sirhvd/u2ypsanj/

[].forEach.call(document.querySelectorAll('#mytable .toggle'), function(el) {
  el.addEventListener('click', function() {
    var el = this;
    var tr = el.closest('tr');
    var children = findChildren(tr);
    var subnodes = children.filter(function(element) {
      return element.matches('.expand');
    });
    subnodes.forEach(function(subnode) {
      var subnodeChildren = findChildren(subnode);
      children = children.filter(function(element) {
          return !subnodeChildren.includes(element);
      });
    });
    if (tr.classList.contains('collapse')) {
      tr.classList.remove('collapse');
      tr.classList.add('expand');
      children.forEach(function(child) {
        child.style.display = 'none';
      });
    } else {
      tr.classList.remove('expand');
      tr.classList.add('collapse');
      children.forEach(function(child) {
        child.style.display = '';
      });
    }
  })
})

var findChildren = function(tr) {
  var depth = tr.dataset.depth;
  var elements = [...document.querySelectorAll('#mytable tr')].filter(function(element) {
    return element.dataset.depth <= depth;
  });
  var next = nextUntil(tr, elements);
  return next;
};

var nextUntil = function(elem, elements, filter) {
  var siblings = [];
  elem = elem.nextElementSibling;
  while (elem) {
    if (elements.includes(elem)) break;
    if (filter && !elem.matches(filter)) {
      elem = elem.nextElementSibling;
      continue;
    }
    siblings.push(elem);
    elem = elem.nextElementSibling;
  }
  return siblings;
};

table td {
  border: 1px solid #eee;
}

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

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

.collapse .toggle {
  background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif");
}

.expand .toggle {
  background: url("http://mleibman.github.com/SlickGrid/images/expand.gif");
}

.toggle {
  height: 9px;
  width: 9px;
  display: inline-block;
}

<table id="mytable">
  <tr data-depth="0" class="collapse level0">
    <td><span class="toggle collapse"></span>Item 1</td>
    <td>123</td>
  </tr>
  <tr data-depth="1" class="collapse level1">
    <td><span class="toggle"></span>Item 2</td>
    <td>123</td>
  </tr>
  <tr data-depth="2" class="collapse level2">
    <td>Item 3a</td>
    <td>123</td>
  </tr>
  <tr data-depth="2" class="collapse level2">
    <td>Item 3b</td>
    <td>123</td>
  </tr>
  <tr data-depth="2" class="collapse level2">
    <td>Item 3c</td>
    <td>123</td>
  </tr>
  <tr data-depth="1" class="collapse level1">
    <td>Item 4</td>
    <td>123</td>
  </tr>
  <tr data-depth="0" class="collapse collapsable level0">
    <td><span class="toggle collapse"></span>Item 5</td>
    <td>123</td>
  </tr>
  <tr data-depth="1" class="collapse collapsable level1">
    <td>Item 6</td>
    <td>123</td>
  </tr>
</table>

Collapsing tree table using plain javascript

1 Answers1