主页 / 问题 / 1004741
Accepted
Виктор Тюрин
Asked:2020-07-19 23:04:53 +0800 CST2020-07-19 23:04:53 +0800 CST

jquery隐藏表格的一部分

  • 772

这里有张桌子

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

但它不适用于列......我怎样才能让它们平滑地隐藏在高度中？

jquery

1 个回答

  1. Best Answer

    事实是浏览器会忽略表格内的任何子标签，除了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>

    • 1

相关问题