Ідея полягає в тому, щоб отримати таблицю даних HTML tr. в якій є кілька блоків (групи або рядки), стан яких можна змінювати (приховати / показати). Спочатку я намагався зробити це на чистому CSS. але так і не зміг знайти спосіб, який би дійсно працював. Тому я вирішив використовувати JQuery.
HTML структура
Структура таблиці досить проста. Єдине, що її відрізняє від інших, це наявність декількох елементів
. Причина використання такої структури полягає в тому, що ми не можемо використовувати елементиОсь як це виглядає:
усередині
потім всередині
Як бачите, чекбокси мають атрибут даних HTML5 - data-toggle = "toggle". який ми потім використовуємо в нашому JQuery для HTML table tr td. щоб переключити контент під ним.
стилізація
Ми створимо простий стиль і в кінці приховуємо чекбокс. Нічого особливого:
магія Jquery
Щоб перемикати (приховати / показати) конкретні рядки HTML table tr. потрібно додати JQuery. а також окремі файли (в даному випадку app.js).
А в файлі app.js буде наступний код:
Цей скрипт запускається кожного разу, коли змінюється стан чекбокса. А так як рядки за умовчанням відображаються, то якщо вибрати чекбокс, вони сховаються. Якщо зняти позначку з чекбокса, вони з'являться знову і так далі.
В принципі все. У вас може бути стільки блоків HTML tr. скільки потрібно. Просто переконайтеся, що використовуєте різні id і ім'я для кожного чекбокса, щоб вони не конфліктували між собою.
Переклад статті "Data Table with Collapsible Table Rows" був підготовлений дружною командою проекту Сайтобудування від А до Я.