Jquery скрыть часть таблицы

113

18 апреля 2021, 18:50

Есть таблица

<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");
});

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

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