Сворачивание таблиц на js
День добрый.
Есть большая таблица, которую переверстывать немного напряжно. Можно ли через js сделать из этой таблицы аккордеоны? Вот грубая модель: https://jsfiddle.net/madeas/hyLews4k/2/ Надо сделать, чтобы по клику на строку с заголовком(с классом) все строки до следующего заголовка сворачивались. Можно с применением jquery. Возможно ли такое реализовать, или лучше создавать внутри таблицы еще таблицу и все в таком духе? |
Если сразу в разметке сделать data-* атрибуты можно написать проще... ) или MVVM в помощь...
<html>
<head>
<style>
.text-center {
text-align: center;
background-color: #333;
color: #fff;
}
.hidden {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
let turn = 0
document.querySelector('table.collapseable').querySelectorAll('tr').forEach(tr => {
if (tr.classList.contains('turn')) {
turn++
(function (turn) {
tr.addEventListener('click', function (e) {
document.querySelectorAll(`tr[data-turn='${turn}']:not(.turn)`)
.forEach(_tr => _tr.classList.toggle('hidden'))
})
})(turn)
}
tr.dataset.turn = turn;
})
})
</script>
</head>
<body>
<table class="collapseable">
<tr class="turn">
<td colspan="4" class="text-center">title</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class="turn">
<td colspan="4" class="text-center">title</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr class="turn">
<td colspan="4" class="text-center">title</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
|
<style>
#toggle {
width: 100%;
}
#toggle tbody tr:not(:first-child) {
display: none;
}
</style>
<table id="toggle">
<tbody>
<tr class="turn">
<th colspan="4" class="text-center">title</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
<tbody>
<tr class="turn">
<th colspan="4" class="text-center">title</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#toggle').on('click', 'tr.turn', function() {
$(this).closest('tbody').children().slice(1).slideToggle(0)
});
</script>
|
| Часовой пояс GMT +3, время: 18:00. |