0

Есть таблица

<table>
    <thead>
        <th><button class="btn-show-catalog-table">Сравнить тарифы каталога отрасли</button></th>
        <th>Какой-то текст</th>
        <th>Какой-то текст</th>
    </thead>
    <tbody>
        <tr>
            <td>Какой-то текст</td>
            <td>Какой-то текст</td>
            <td>Какой-то текст</td>
        </tr>
        <div class="show-catalog-table">
            <tr>
                <td>Какой-то текст</td>
                <td>Какой-то текст</td>
                <td>Какой-то текст</td>
            </tr>
            <tr>
                <td>Какой-то текст</td>
                <td>Какой-то текст</td>
                <td>Какой-то текст</td>
            </tr>
            <tr>
                <td>Какой-то текст</td>
                <td>Какой-то текст</td>
                <td>Какой-то текст</td>
            </tr>
            <tr>
                <td>Какой-то текст</td>
                <td>Какой-то текст</td>
                <td>Какой-то текст</td>
            </tr>
        </div>
    </tbody>
</table>

Пишу следующий код:

function toggleCatalogBlock($btn, $block) {
    $($btn).click(function() {
        $($block).slideToggle("slow");
    });
};

$(document).ready(function() {
    toggleCatalogBlock(".btn-show-catalog-table", ".show-catalog-table");
});

Но со столбцами это не работает... Как сделать так, что они плавно скрывались по высоте?

2
  • Со строками не работает* ошибся 19 июл 2019 в 15:27
  • Получилось сделать, используя tbody 2 раза. Только вопрос, почему он резко пропадает и резко появляется? 19 июл 2019 в 15:47

1 ответ 1

1

Дело в том, что браузер игнорирует любые дочерние теги внутри таблицы кроме tr, tbody и т.д. Поэтому правильнее будет добавить добавить класс, к элементу который вы хотите открывать/скрывать, а именно к tr

function toggleCatalogBlock($btn, $block) {
  $($btn).click(function() {
    var $blocks = $($block)
    if ($blocks.is(':visible')) {
      $blocks = $($blocks.get().reverse());
    }
    toggleOne($blocks, 0);
  });
};

function toggleOne(blocks, index) {
  var block = blocks.eq(index);
  if (!block.length) return; 
  block.slideToggle(50, toggleOne.bind(null, blocks, index + 1));
}

$(document).ready(function() {
  toggleCatalogBlock(".btn-show-catalog-table", ".show-catalog-table");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <th><button class="btn-show-catalog-table">Сравнить тарифы каталога отрасли</button></th>
    <th>Какой-то текст</th>
    <th>Какой-то текст</th>
  </thead>
  <tbody>
    <tr>
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
    </tr>
    <tr class="show-catalog-table">
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
    </tr>
    <tr class="show-catalog-table">
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
    </tr>
    <tr class="show-catalog-table">
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
    </tr>
    <tr class="show-catalog-table">
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
      <td>Какой-то текст</td>
    </tr>
  </tbody>
</table>

3
  • Так получается, что нельзя сделать так, чтобы они плавно скрывались по высоте? 21 июл 2019 в 13:58
  • @ВикторТюрин есть несколько способов, один из них можете посмотреть в моем обновленном ответе
    – Vladimir
    22 июл 2019 в 8:15
  • Понял, щас буду разбираться! Спасибо большое) 22 июл 2019 в 12:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.