Таблица данных со сворачиваемыми строками

Идея состоит в том, чтобы получить таблицу данных HTML tr, в которой есть несколько блоков (группы или строки), состояние которых можно изменять (скрыть/показать). Сначала я пытался сделать это на чистом CSS, но так и не смог найти способ, который бы действительно работал. Поэтому я решил использовать JQuery.

Посмотреть демо

HTML структура

Структура таблицы довольно проста. Единственное, что ее отличает от других, это наличие нескольких элементов <tbody>. Причина использования такой структуры заключается в том, что мы не можем использовать элементы <div> или другие HTML-элементы за пределами элемента <td> в таблице.

Вот как это выглядит:

<table>
<!--Заголовок таблицы-->
<thead>
</thead>
<!--Главное тело таблицы -->
<tbody>
<!-- Chekbox и Label -->
<tbody class="label">
</tbody>
<!-- Скрываемый контент -->
<tbody class="hide">
</tbody>
<!-- Chcekbox и Label -->
<tbody class="label">
</tbody>
<!-- Скрываемый контент -->
<tbody class="hide">
</tbody>
</tbody>
</table>

Внутри <tbody> с классом label мы добавим <tr> и

. Это будет применяться ко всем столбцам. Внутри этого тега мы добавим checkbox и label. Вскоре чекбокс будет скрыт с помощью CSS.

Затем внутри <tbody> с классом hide мы добавим HTML table tr и <td>, которые хотим скрыть. В этом случае у нас получится две строки и пять столбцов. После всех изменений HTML должен выглядеть следующим образом:

<table>
<thead>
<tr>
<th>Regian</th>
<th>Q1 2010</th>
<th>Q2 2010</th>
<th>Q3 2010</th>
<th>Q4 2010</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="accounting">Accounting</label>
<input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="management">Management</label>
<input type="checkbox" name="management" id="management" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody> 
</tbody>
</table>

Как видите, чекбоксы имеют атрибут данных HTML5 — data-toggle=”toggle”, который мы затем используем в нашем JQuery для HTML table tr td, чтобы переключить контент под ним.

Стилизация

Мы создадим простой стиль и в конце скроем чекбокс. Ничего особенного:

table { 
width: 750px; 
border-collapse: collapse; 
margin:50px auto;
}
th { 
background: #3498db; 
color: white; 
font-weight: bold; 
}
td, th { 
padding: 10px; 
border: 1px solid #ccc; 
text-align: left; 
font-size: 18px;
}
.labels tr td {
background-color: #2cc16a;
font-weight: bold;
color: #fff;
}
.label tr td label {
display: block;
}
[data-toggle="toggle"] {
display: none;
}

Магия Jquery

Чтобы переключать (скрыть /показать) конкретные строки HTML table tr, нужно добавить JQuery, а также отдельные файлы (в данном случае app.js).

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>

А в файле app.js будет следующий код:

$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});

Этот скрипт запускается каждый раз, когда изменяется состояние чекбокса. А так как строки по умолчанию отображаются, то если выбрать чекбокс, они скроются. Если снять отметку с чекбокса, они появятся снова и так далее.

В принципе все. У вас может быть столько блоков HTML tr, сколько нужно. Просто убедитесь, что используете разные id и имя для каждого чекбокса, чтобы они не конфликтовали между собой.

Пожалуйста, оставьте ваши отзывы по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, лайки, подписки!

ВЛВиктория Лебедеваавтор-переводчик статьи «Data Table with Collapsible Table Rows»