切换可变数量的表行

Question

我有一个表格,点击链接应该显示属于单击行中的数据的"子".

由于子数可能在0到n之间变化,我想我应该通过该.val方法计算子数,这是对的吗？因此,值应该是具有类名"affiliated"的invisble行的数量,直到下一个tr没有类名称.我怎样才能做到这一点？我做了一些尝试,但我对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;
});

示例小提琴

Answer 2

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

您使用.val和.stop没有意义，并且您使用的不是输入而是a。我使用了.nextUntil因为行将被分组在一起；只需找到最接近的父行a（这是“主”行）并用于.nextUntil查找其附属行 - 接下来直到另一个主行。如果主排有自己的班级也会有所帮助。