Объединить строки таблицы по условию и показать при нажатии

@noobie · Регистрация: 28.01.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Уровень знакомства c JS — знание синтаксиса и основ.
Ситуация такая. PHP-скрипт рисует таблицу и отдаёт её браузеру.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
    <tr class="attr1">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="attr1">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="attr2">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Нужно, чтобы js-скрипт объединял строки с одинаковым названием класса и показывал ссылку/кнопку "Показать/Скрыть", при нажатии на которую можно было увидеть скрытые строки.

Помощь нужна чисто алгоритмическая.

@Lazy_Den · 02.02.2016, 19:06

Сообщение от noobie

Помощь нужна чисто алгоритмическая.

Вообще-то, некоторую функциональность, можно было бы и на стороне сервера провернуть, но если нужно сделать всё на стороне клиента, то:
1. Выбрать все элементы <tr> (querySelectorAll)
2. Бежим по ним в цикле (forEach или for)
3. Если display !== 'none', то фильтруем выбранные выше элементы (.filter()), присваивая результат в переменную "cnt"
3.1. Если текущий элемент в фильтрации !== текущий элемент в цикле && класс текущего элемента в фильтрации === класс текущего элемента в цикле, то задаем ему display = 'none' и возвращаем true.
4. Если cnt.length > 0, то после текущего элемента в цикле, добавляем <tr> и в него '<td colspan="' + tr.children.length + '">' с кнопкой "Показать/Скрыть". Кнопке задаём какой-нибудь класс "toggle" и data-атрибут со значением равным tr.className
5. Устанавливаем обработчик события click на таблицу.
6. Если e.target.className === 'toggle', то выбираем все элементы с таким классов (querySelectorAll) и в цикле пробегаем по ним, устанавливая display = 'none' или 'table-row', в зависимости от текущего значения display.
7. Радуемся, что всё работает и бежим на пиво.

Если ступор, то подглядывать тут

Пример реализации в песочнице

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var d = document,
allTr = [].slice.call(d.querySelectorAll('tr'));
 
allTr.forEach(function(tr){
    if(tr.style.display !== 'none') {
    var cnt = allTr.filter(function(el){
        if(el !== tr && tr.className === el.className) {
        el.style.display = 'none';
        return true;
      }
    }).length;
    if(!cnt) { return false; }
    tr.insertAdjacentHTML('afterEnd', '<tr><td colspan="' + tr.children.length + '" data-toggle="' + tr.className + '" class="toggle">Показать</td></tr>');
  }
});
 
d.querySelector('table').addEventListener('click', function(e){
    if(e.target.classList.contains('toggle')) {
    e.target.textContent = e.target.textContent === 'Показать' ? 'Скрыть' : 'Показать';
    [].forEach.call(d.querySelectorAll('.' + e.target.dataset.toggle),function(el, i){
        if(i > 0) {
        el.style.display = el.style.display === 'none' ? 'table-row' : 'none';
      }
    });
  }
});

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

Объединить строки таблицы по условию и показать при нажатии

Решение