表格行可以展开和关闭吗?

是的，表格行可以上下滑动，但这很丑陋，因为它改变了表格的形状并使所有内容跳跃.而是在每个td中放置和元素...类似p或h2等的意义.

Yes, a table row can slide up and down, but it's ugly, since it changes the shape of the table and makes everything jump. Instead, put and element in each td... something that makes sense like a p or h2 etc.

有关如何实现表格幻灯片切换...

For how to implement a table slide toggle...

将点击处理程序放在整个表上可能是最简单的， .stopPropagation() 和 检查点击的内容 .

It's probably simplest to put the click handler on the entire table, .stopPropagation() and check what was clicked.

如果单击连续的带tsd的td，请关闭其中的p.如果不是连续的td，请先关闭然后切换下一行的p.

If a td in a row with a colspan is clicked, close the p in it. If it's not a td in a row with a colspan, then close then toggle the following row's p.

本质上是将所有书面内容包装在td内的一个元素中，因为您从不想slideUp，td或tr ，否则表格的形状会发生变化！

It is essentially to wrap all your written content in an element inside the tds, since you never want to slideUp a td or tr or table shape will change!

类似的东西:

$(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();
        }                    
    });
});​

使用此jsFiddle示例进行尝试.

...并尝试此jsFiddle显示+--切换的实现. /a>

Try it out with this jsFiddle example.

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

HTML只需具有多个td的交替行，然后具有td的colspan大于1的行.您显然可以很容易地调整细节.

The HTML just has to have alternating rows of several tds and then a row with a td of a colspan greater than 1. You can obviously adjust the specifics quite easily.

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>​