javascript - 切换可变数量的表格行

Question

我有一个表，单击链接应显示属于单击行中的数据的“子行”。

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

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

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

演示

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;
});

示例小提琴

Answer 2

http://jsfiddle.net/6t6QT/2/

Your use of .val and .stop don't make sense, and you are not using an input but an a. I used .nextUntil since the rows will be grouped together; just find the closest parent row of the a (this is the "master" row) and use .nextUntil to find its affiliated rows -- next until the other master row. It would also help if the master rows had their own class.