Таблица данных со сворачиваемыми строками
Идея состоит в том, чтобы получить таблицу данных 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> и
Затем внутри <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 и имя для каждого чекбокса, чтобы они не конфликтовали между собой.