Форум

madeas · #1 (**permalink**) 22.02.2019, 10:20

День добрый.

Есть большая таблица, которую переверстывать немного напряжно.
Можно ли через js сделать из этой таблицы аккордеоны?

Вот грубая модель: https://jsfiddle.net/madeas/hyLews4k/2/

Надо сделать, чтобы по клику на строку с заголовком(с классом) все строки до следующего заголовка сворачивались. Можно с применением jquery.

Возможно ли такое реализовать, или лучше создавать внутри таблицы еще таблицу и все в таком духе?

SuperZen · #2 (**permalink**) 22.02.2019, 13:46

Если сразу в разметке сделать 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>

laimas · #3 (**permalink**) 22.02.2019, 14:40

<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>

Форум

Справочник

Discord чат

Курсы javascript