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

Question

是否可以使表格行展开并折叠？任何人都可以将我推荐给脚本或示例吗？如果可能的话,我更喜欢jQuery.我有一个想要实现的绘图概念:

Answer 1

是的,表格行可以上下滑动,但它很难看,因为它会改变表格的形状并使一切都跳跃.相反,把和元素在每td...一些有意义像p或h2等

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

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

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

它本质上是包装你写的所有内容中的元素里面td,S ,因为你永远不希望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();
        }                    
    });
});?

尝试使用这个jsFiddle示例.

...并试试这个jsFiddle显示+- -切换的实现.

HTML只需要有几个tds的交替行,然后是td一个colspan大于1 的行.显然可以很容易地调整细节.

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

Answer 2

你可以这样做:

HTML

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td><a href="#" id="show_1">Show Extra</a></td>
    </tr>
    <tr>
        <td colspan="5">
            <div id="extra_1" style="display: none;">
                <br>hidden row
                <br>hidden row
                <br>hidden row
            </div>
        </td>
    </tr>
</table>

jQuery的

$("a[id^=show_]").click(function(event) {
    $("#extra_" + $(this).attr('id').substr(5)).slideToggle("slow");
    event.preventDefault();
});

查看JSFiddle的演示

希望这可以帮助 !