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

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

Data-Table-with-Collapsible-Table-Rows

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

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” был подготовлен дружной командой проекта Сайтостроение от А до Я.