Question

我正在寻找一个小的jquery帮助来折叠/扩展我在我的网站上的表格。我也希望桌子能够开始扩展。

以下是我的表格示例：

<table class="table">
  <caption>
  <div class="video-header">Header</div>
  </caption>
  <tbody>
    <tr class="video-row">
      <td class="field-title"> Content </td>
    </tr>
    <tr class="video-row">
      <td class="field-title"> More Content</td>
    </tr>
  </tbody>
</table>

我希望当你点击“标题”时它会折叠整个表格，而不仅仅是行。

我找到了以下example，但似乎无法将其转换为我的情况。

Answer 1

只需为标题元素

写一个click handler

jQuery(function () {
    $('table > caption').click(function () {
        $(this).next().toggle();
    })
})

演示：Fiddle

Answer 2

因为您的表是动态生成的，所以您应该定义表所在的父节点。该父节点应该始终存在于页面中，并且应该动态生成 NOT 。

  <div id="table-container">
    <table class="table">
      <caption>
      <div class="video-header">Header</div>
      </caption>
      <tbody>
        <tr class="video-row">
          <td class="field-title"> Content </td>
        </tr>
        <tr class="video-row">
          <td class="field-title"> More Content</td>
        </tr>
      </tbody>
    </table>
  </div>

然后在该父节点上绑定click事件。

$("#table-container caption").on("click", function(){
  $("#table-container table").css("display", "none");
});

折叠/展开表格

2 个答案: