javascript - 切换可变数量的表行

Question

我有一个表格，点击链接应该会显示属于所点击行中数据的“子行”。

由于子行数可能在 0 到 n 之间变化，我想我应该通过 .val 方法计算子行数，这样对吗？因此，该值应该是在下一个没有类名的 tr 之前具有类名“affiliated”的不可见行的数量。我怎样才能做到这一点？ 我做了一些尝试，但我对 jQuery 还很陌生。

我想像这样计算 tr.affiliated 的数量:

 var affiliatednumber = $(this).find("tr.affiliated").val().stop();

DEMO

Answer 1

如果你在每个父 tr 上放置一个类，你可以像这样使用 nextUntil():

<tbody>
    <tr class="parent">
        <td>John</td>
        <td>HR Admin</td>
        <td>10/10/1980</td>
        <td>Yes</td>
        <td><a class="showaffiliated" href="#">Yes</a></td>
    </tr>
    <tr class="affiliated">
        <td colspan="2">Amanda</td>
        <td colspan="3">20/20/1985</td>
    </tr>
    <tr class="affiliated">
        <td colspan="2">Louis</td>
        <td colspan="3">20/10/2010</td>
    </tr>
</tbody>

$("tr.affiliated").hide();

$("a.showaffiliated").click(function() {
    var $affiliated = $(this).closest(".parent").nextUntil(".parent");
    $affiliated.toggle();
    var affiliatednumber = $affiliated.length;
});

Example fiddle