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

是否可以使表行展开和折叠？有谁可以引用我一个脚本或一个例子？我喜欢jquery如果可能的话。我有一个绘图概念我想实现：

解决方法

是的，桌子行可以上下滑动，但是它很丑，因为它改变了桌子的形状，并使所有的东西都跳了起来。相反，在每个td中放置和元素…像p或h2等有意义的东西

关于如何实现表格幻灯片切换…

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

如果单击一个具有colspan的一行中的td，请关闭其中的p。如果它不是一个具有colspan的td，那么关闭，然后切换下一行的p。

它本质上是将所有你写的内容包装在tds内的一个元素中，因为你不想滑动一个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只需要具有几个tds的交替行，然后是一个大于1的colspan的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>​