jquery - 表格行可以展开和关闭吗？

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

已关闭 6 年前。

Improve this question

是否可以使表格行展开和折叠？有人可以给我推荐一个脚本或示例吗？

如果可能的话，我更喜欢 jQuery。我有一个想要实现的绘图概念:

Answer 1

是的，表格行可以上下滑动，但它很丑，因为它改变了表格的形状并使所有内容都跳跃。相反，在每个 td 中放置一个元素，例如 p 或 h2 等有意义的元素。

至于实现表格滑动切换...

将点击处理程序放在整个表格上可能是最简单的， .stopPropagation() 和 check what was clicked 。

如果单击带有 colspan 的行中的 td，则关闭其中的 p。如果它不是带有 colspan 的行中的 td，则关闭然后切换下一行的 p。

必须将所有书面内容包装在 td 内的一个元素中，因为您永远不想slideUp td 或 tr 或表格形状将会改变!

类似于:

$(function() {
  
      // Initially hide toggleable content
    $("td[colspan=3]").find("p").hide();

      // Click handler on entire table
    $("table").click(function(event) {

          // No bubbling up
        event.stopPropagation();

        var $target = $(event.target);

          // Open and close the appropriate thing
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});​

<强> Try it out with this jsFiddle example.

<强> ... and try out this jsFiddle showing implementation of a + - - toggle.

HTML 只需要有几个 td 的交替行，然后是 colspan 大于 1 的 td 的行。显然，您可以相本地调整细节很容易。

HTML 看起来像这样:

<table>
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>

    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>
    
    <tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
    <tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
    </td></tr>    
</table>​