Question

我有一个如下所示的表格结构。当我点击第一行It Toggles.Now我想点击复选框以展开所有行。我正在尝试进行Grouped可折叠表格。

<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”事件：

$("#chkdog").click(function () {       
    $("tr.headerd").each(function(){$(this).click();});
});

Answer 2

使用这段代码：

$("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

Answer 3

而不是：

$("#divdg").children() .slideToggle("fast");

尝试：

$("#Table1").find('tr.child') .slideToggle("fast");

Answer 4

会是这样的：

<tr id="row1" class="headerd headerstyle">
    <td>dg1</td>
    <td>Row</td>
</tr>
<tr class="child">
    <td id="row2">data1</td>
    <td>data2</td>
</tr>
<tr id="row3" class="child">
    <td>data3</td>
    <td>data4</td>
</tr>

$("#chkdg").click(function () {
    $("#row1").slideToggle("fast");
});

Answer 5

$("#chkdog").click(function () {
            //$(".headerd",$(this).children()).slideToggle("fast");
            if($(this).is(':checked'))
            {
            $("tr.child", $(this).parent()).slideDown("fast");
            }
            else {
            $("tr.child", $(this).parent()).slideUp("fast");
            }
        });

从Div切换儿童桌

5 个答案: