javascript - 从 Div 切换子表

Question

我有一个如下所示的表格结构。当我单击第一行时，它会切换。现在我想单击复选框来展开所有行。我正在尝试进行分组可折叠表格。

<div id=divdg">
<input type="checkbox" id="chkdg"/>Expand/Collapse all
<table id="Table1" cellpadding="0" cellpadding="0" border="1">
    <tr class="headerd headerstyle">
        <td>dg1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>
<div style="position: relative; left: 25px; overflow: auto; display:inline-table;">
            <table cellspacing="0" cellpadding="0" border="1">
                <tr class="headerd headerstyle">
                    <td>dg2</td>
                    <td>Row</td>
                </tr>
                <tr class="child">
                    <td>data1</td>
                    <td>data2</td>
                </tr>
                <tr class="child">
                    <td>data3</td>
                    <td>data4</td>
                </tr>
            </table>
</div>
</div>

 $("tr.headerd").click(function () {
            $("tr.child", $(this).parent()).slideToggle("fast");
        });

    $("#chkdg").click(function () {
        //$(".headerd",$(this).children()).slideToggle("fast");
        $("#divdg").children() .slideToggle("fast");
    });

http://jsfiddle.net/ZL5Vb/1

Answer 1

使用这段代码:

$("tr.headerd").click(function () {
        $("tr.child", $(this).parent()).slideToggle("fast");
    });

    $("#chkdog").change(function () {
        if ($(this).attr('checked')) {$(".child").slideUp("fast");}
        else
        {$(".child").slideDown("fast");}

    });

查看更新fiddle