javascript - 使用 JQuery 选择标题之间的所有表行

Question

具有以下自动生成的表格布局(我对其几乎没有影响)

<table>
   <tr>
      <th>First Header</th>
      <th>
         <a href="#" class="used-for-some-action">show/hide</a>
      </th>
   </tr>
   <tr>
      <td>A question?</td>
      <td><input value="User's answer" /></td>
   </tr>
   <!-- Some more rows -->

   <tr>
      <th>Second Header</th>
   </tr>

   <!-- Some more question blocks -->
</table>

...我想选择所有 <tr> - 使用 Javascript/jQuery 两个 header 之间的元素为了提供这样的功能:

• 隐藏属于某个标题的所有问题。
• 自动编辑<input> s(例如选中/取消选中所有或恢复默认值)

导致所需操作的链接已位于正确的标题中。

解决这个问题的最佳方法是什么？

Answer 1

您可以使用nextUntil()来解决这个问题。

function getRows(start){
    return start.nextUntil(function(i, v){
        return $('th', v).length > 0;
    });
}

演示:Fiddle

显示/隐藏的实现

$('table').on('click', '.used-for-some-action', function(){
    getRows($(this).closest('tr')).toggle();
    return false;
});

演示:Fiddle

更新:
基于@BLSully 的评论

$('table').on('click', '.used-for-some-action', function(){
    $(this).closest('tr').nextUntil('tr:has(th)').toggle();
    return false;
});

演示:Fiddle