jquery - 使用 jQuery 展开表格中的某些行

Question

我有一个表，并希望使某些行可扩展 - 单击一行将扩展该父行下的其他几行。并非所有行都应该是可扩展的。jQuery会好的。任何人都可以给我一个关于如何实现或指向手册的提示吗？

谢谢。

Answer 1

我们对我工作中的一个项目提出了类似的要求。这是我在jsfiddle上做的一个快速示例。

<table>
    <tbody>
        <tr class="main">
            <td >
                <span class="expand">
                    expand</span>
            </td>
            <td>
                Show
            </td>
            <td>
                Show
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 1
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 2
            </td>
        </tr>
</table>

现在的 jQuery

$("td span.expand").click(function() {
    $(this).parents("tr.main").nextUntil("tr.main").toggle();
});

此示例使用nextUntil它将继续选择元素，直到它遇到定义的选择器，在本例中为 tr.main

Answer 2

这是一些简单的教程http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/，只需转换为处理表行，但是您应该考虑使用 div