Javascript - развернуть / свернуть строки таблицы

Учитывая следующую таблицу / код, я хотел бы добавить два элемента. Я недостаточно хорошо знаю JavaScript, и этот код оставил другой программист. В остальном код работает должным образом.

Вот два предмета:

Таблица должна начинаться в свернутом состоянии. Все узлы должны быть рухнул до уровня «дедушка и бабушка».
Должна быть ссылка «развернуть все» и отдельная ссылка «свернуть все».

Вот таблица, которую я использую:

$(function() {
        $('#mytable').on('click', '.toggle', function () {
            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');
            var children = findChildren(tr);
    
            var subnodes = children.filter('.expand');
            subnodes.each(function () {
                var subnode = $(this);
                var subnodeChildren = findChildren(subnode);
                children = children.not(subnodeChildren);
            });
    
            if (tr.hasClass('collapse')) {
                tr.removeClass('collapse').addClass('expand');
                children.hide();
            } else {
                tr.removeClass('expand').addClass('collapse');
                children.show();
            }
            return children;
        });
    });

table td, th {
        border: 1px solid #eee;
        font-family: Arial;
        font-size: 16px;
    }
    .level0 td:first-child {
        padding-left: 5px;
    }
    .level1 td:first-child {
        padding-left: 25px;
    }
    .level2 td:first-child {
        padding-left: 50px;
    }
    .level3 td:first-child {
        padding-left: 75px;
    }
    
    .collapse .toggle {
        background: url("open.gif");
        background-repeat: no-repeat;
    }
    .expand .toggle {
        background: url("closed.gif");
        background-repeat: no-repeat;
    }
    .toggle {
        height: 20px;
        width: 20px;
        display: inline-block;
    }
    .age {
            text-align: center;
    }
    .nam {
            text-align: left;
    }

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id = "mytable" style = "border-collapse: collapse" cellpadding = "6">
        <thead>
        <tr>
            <th width = "250px">Type</th>
            <th width = "50px">Age</th>
            <th width = "50px">Name</th>
        </tr>
        </thead>
    
        <tr data-depth = "0" class = "collapse level0">
            <td><span class = "toggle collapse"></span>GRANDPARENT</td>
            <td class = "age">80</td>
            <td class = "nam">Ethel</td>
        </tr>
    
        <tr data-depth = "1" class = "collapse level1">
            <td><span class = "toggle"></span>CHILD 1</td>
            <td class = "age">55</td>
            <td class = "nam">Susan</td>
        </tr>
    
        <tr data-depth = "2" class = "collapse level2">
            <td><span class = "toggle collapse"></span>GRANDCHILD 1</td>
            <td class = "age">32</td>
            <td class = "nam">Kristen</td>
        </tr>
    
        <tr data-depth = "3" class = "collapse collapsable level3">
            <td>GREAT GRANCHILD 1</td>
            <td class = "age">12</td>
            <td class = "nam">Layla</td>
        </tr>
    
        <tr data-depth = "1" class = "collapse collapsable level1">
            <td><span class = "toggle collapse"></span>CHILD 2</td>
            <td class = "age">52</td>
            <td class = "nam">Joanne</td>
        </tr>
    
        <tr data-depth = "2" class = "collapse collapsable level2">
            <td><img src = "list.gif"/>GRANDCHILD 2</td>
            <td class = "age">28</td>
            <td class = "nam">Marie</td>
        </tr>
    
    </table>

Что мне нужно добавить в JavaScript для этого?

Вы можете проголосовать за принятый ответ, странно видеть принятый с оценкой 0!

— 04.05.2018 11:38

javascript

19.03.2018 14:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 211

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужен именно такой результат?
(Я немного поигрался с вашим кодом, чтобы он работал более или менее так, как я думаю.)

Во всяком случае, я не совсем понимаю, что было сделано, и предлагаю вам только JS-решение. Но ... я думаю, что классы в ваших tr могут быть изменены, чтобы получить ваш результат «все скрыто» при загрузке страницы без использования JS.
Прокомментировал где добавил обновки:
Обновлено: И я тоже немного почистил код.

$('.collapse').on('click', function() {
  //console.info($(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();
  }

});


// HERE IS THE CODE I ADDED
$('#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");
});
$(document).ready(function() {
  $('#hide_all').trigger('click');
});

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: 30px;
}

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

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

.age {
  text-align: center;
}

.nam {
  text-align: left;
}

.closed td:first-child::before {
  content: "• ";
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HERE IS THE HTML I ADDED FOR THE BUTTONS -->
<button id = "show_all"><p>Show all</p></button>
<button id = "hide_all"><p>Hide all</p></button>
<!-- END -->

<table id = "mytable" style = "border-collapse: collapse" cellpadding = "6">
  <thead>
    <tr>
      <th width = "250px">Type</th>
      <th width = "50px">Age</th>
      <th width = "50px">Name</th>
    </tr>
  </thead>

  <tr data-depth = "0" class = "collapse level0">
    <td>GRANDPARENT</td>
    <td class = "age">80</td>
    <td class = "nam">Ethel</td>
  </tr>

  <tr data-depth = "1" class = "collapse level1">
    <td>CHILD 1</td>
    <td class = "age">55</td>
    <td class = "nam">Susan</td>
  </tr>

  <tr data-depth = "2" class = "collapse level2">
    <td>GRANDCHILD 1</td>
    <td class = "age">32</td>
    <td class = "nam">Kristen</td>
  </tr>

  <tr data-depth = "3" class = "collapse level3">
    <td>GREAT GRANCHILD 1</td>
    <td class = "age">12</td>
    <td class = "nam">Layla</td>
  </tr>

  <tr data-depth = "1" class = "collapse level1">
    <td>CHILD 2</td>
    <td class = "age">52</td>
    <td class = "nam">Joanne</td>
  </tr>

  <tr data-depth = "2" class = "collapse level2">
    <td>GRANDCHILD 2</td>
    <td class = "age">28</td>
    <td class = "nam">Marie</td>
  </tr>

</table>

А вот отрывок перед моим последним изданием, на случай, если «очищенное» вам не подходит:

$('.collapse').on('click', function() {
  //console.info($(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')) {
    $(children).hide();
  } else {
    $(children).show();
  }

});


// HERE IS THE CODE I ADDED
$('#show_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").show();
});
$('#hide_all').on('click', function() {
  $("#mytable tr.collapse:not([data-depth='0'])").hide();
});
$(document).ready(function() {
  $('#hide_all').trigger('click');
});

table td,
th {
  border: 1px solid #eee;
  font-family: Arial;
  font-size: 16px;
}

.level0 td:first-child {
  padding-left: 5px;
}

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

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

.level3 td:first-child {
  padding-left: 75px;
}

.collapse .toggle {
  background: url("open.gif");
  background-repeat: no-repeat;
}

.expand .toggle {
  background: url("closed.gif");
  background-repeat: no-repeat;
}

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

.age {
  text-align: center;
}

.nam {
  text-align: left;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HERE IS THE HTML I ADDED -->
<button id = "show_all"><p>Show all</p></button>
<button id = "hide_all"><p>Hide all</p></button>
<!-- END -->

<table id = "mytable" style = "border-collapse: collapse" cellpadding = "6">
  <thead>
    <tr>
      <th width = "250px">Type</th>
      <th width = "50px">Age</th>
      <th width = "50px">Name</th>
    </tr>
  </thead>

  <tr data-depth = "0" class = "collapse level0">
    <td><span class = "toggle collapse"></span>GRANDPARENT</td>
    <td class = "age">80</td>
    <td class = "nam">Ethel</td>
  </tr>

  <tr data-depth = "1" class = "collapse level1">
    <td><span class = "toggle"></span>CHILD 1</td>
    <td class = "age">55</td>
    <td class = "nam">Susan</td>
  </tr>

  <tr data-depth = "2" class = "collapse level2">
    <td><span class = "toggle collapse"></span>GRANDCHILD 1</td>
    <td class = "age">32</td>
    <td class = "nam">Kristen</td>
  </tr>

  <tr data-depth = "3" class = "collapse collapsable level3">
    <td>GREAT GRANCHILD 1</td>
    <td class = "age">12</td>
    <td class = "nam">Layla</td>
  </tr>

  <tr data-depth = "1" class = "collapse collapsable level1">
    <td><span class = "toggle collapse"></span>CHILD 2</td>
    <td class = "age">52</td>
    <td class = "nam">Joanne</td>
  </tr>

  <tr data-depth = "2" class = "collapse collapsable level2">
    <td><img src = "list.gif" />GRANDCHILD 2</td>
    <td class = "age">28</td>
    <td class = "nam">Marie</td>
  </tr>

</table>

Я согласен с решением «полностью на javascript», как вы и предлагали. Я просто не мог найти ни одного, который мог бы перейти на уровень «правнука». Если вы знаете об одном, я весь уши.

— 19.03.2018 16:14

Я отредактировал свой ответ и предложил вам что-то более наглядное со знаком «•», указывающим на «закрытые» узлы. (Это можно легко изменить, это класс). Кнопки, которые вы просили, тоже работают. Тебе этого достаточно?

— 19.03.2018 17:06

19.03.2018 15:05