选择表的两行之间的所有行

Question

我使用以下代码选择element1（Selected Table第1行）和element2（Selected Table第2行）之间的所有元素（表行），但它给出了表的所有行，而不是以下之间的唯一行两排。

 $("img[alt='Expand']").bind("click", function () {
      var elementUntil1 = $(this).parent().parent().parent();
      var elementUntil2 = elementUntil1.nextAll("tr.SubClassRow:first")
      var betweenElement = $(elementUntil1[0]).nextUntil(elementUntil[0]).andSelf();

});


   <table>
    <tbody>
        <tr class="SubClassRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="Expand" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="SubClassRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="Expand" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="SubClassRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="Expand" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="VehicleDetailRow">
            <td style="padding-left: 10px;">
                <div class="clickable">
                    <img alt="hidden" />
                </div>
            </td>
            <td>15-Sep-2001</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Answer 1

我建议：

$('img[alt="Expand"]').click(function () {
    var rowsBetween = $(this).closest('tr').nextUntil('.subClassRow').filter(':not(".SubClassRow")');
    // use like so:
    rowsBetween.css('visibility', function (i, v) {
        console.log(this, v);
        return v == 'collapse' ? 'visible' : 'collapse';
    }).find('td').toggle();
});

JS Fiddle demo

参考文献：

• attribute-equals ([attribute="value"]) selector。
• closest()。
• CSS visibility property。
• nextUntil()。
• toggle()。