Question

在.NET MVC项目中，搜索会生成一个包含标题和未知行数的表。这些行中的每一行依次将隐藏嵌套表，其中包含标题和未知行数。我希望嵌套表在单击相应的行时展开。

到目前为止，我已经有了这个：

<script>
    $('div.ordergrid table.orders tbody tr.row td').click(
    function () {
        $(this).parent().parent().children('tr.rowdetail').toggle();
    }
)
</script>

<div id="ordergrid">

    <table id="orders">
        <thead>
            <th>Foo</th>
            <th>Foo</th>
            <th>Foo</th>
            <th>Foo</th>
            <th colspan="3">Foo</th>
            <th>Foo</th>
        </thead>
    @foreach (var mo in Model)
    {
        <tbody>
            <tr class="row">
                <td>Bar</td>
                <td>Bar</td>
                <td>Bar</td>
                <td>Bar</td>
                <td colspan="3">Bar</td>
                <td>Bar</td>
            </tr>
            <tr class="rowdetail">
                <td colspan="8">
                    <table>
                        <thead>
                            <th>Baz</th>
                            <th>Baz</th>
                            <th>Baz</th>
                            <th>Baz</th>
                            <th>Baz</th>
                            <th>Baz</th>
                            <th>Baz</th>
                            <th>Baz</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>2</td>
                                <td>3</td>
                                <td>4</td>
                                <td>5</td>
                                <td>6</td>
                                <td>7</td>
                                <td>8</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            </tbody>
    }

    </table>
</div>

（嵌套的tbody稍后会被另一个foreach替换。）

目前，点击后没有任何反应。 click事件似乎并没有“坚持”到预期的控件。

哦，.parent().parent()看起来有点傻，但我不确定如何正确选择.parents()。

Answer 1

你的选择器似乎是错误的你使用类选择器而不是id选择器，需要使用“＃”。您也可以使用next（）函数选择相邻的tr。

$('div#ordergrid table#orders tbody tr.row td').click(
    function () {
        $(this).parent().next('tr.rowdetail').toggle();
    }
);

Answer 2

从给出的HTML中，你可以这样做

$('.row').click(function () {
    $(this).next('tr').toggle();
});

当点击class="row"的行时，它会获得下一行（如果您的结构正确，它将是隐藏的行）并切换其可见性。

或者你可以使用更具体的选择器，

$('tr.row').click(function () {
    $(this).next('tr.rowdetail').toggle();
});

将获得类rowdetail的下一个元素并切换其可见性。在给出的示例结构中，两者都会做同样的事情，但是特定于您的选择器通常会导致不太可预测的结果。在这种情况下，您的具体程度取决于页面内容的其余部分。

Answer 3

我认为你在寻找的是

$('div.ordergrid table.orders tr.row > td').click(function () {
    $(this).closest('tr.row').next('tr.rowdetail').toggle();
})

您需要切换点击的.rowdetails行旁边的.row行

使用Jquery切换嵌套表

3 个答案: