折叠/展开表格答案

【问题标题】：Collapse/Expand Table折叠/展开表格
【发布时间】：2014-01-07 02:18:14
【问题描述】：

我正在寻找一些 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，但似乎无法将其转化为我的情况。

【问题讨论】：

这个表是由 Drupal CMS 生成的。我无能为力。

标签： javascript jquery html

【解决方案1】：

只需为标题元素写一个click handler

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

演示：Fiddle

【讨论】：

阿伦，是否可以在折叠或展开时显示“+/-”符号？
谢谢阿伦！还有一个问题，有没有办法让折叠和展开有一个滑动过渡，而不仅仅是显示和消失？
@Dan 用当前的标记看起来有点困难stackoverflow.com/questions/6882522/…

【解决方案2】：

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

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

【讨论】：