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 选择两个标头之间的所有 -elements 以提供以下功能：

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

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

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

Answer 1

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

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

演示：小提琴

显示/隐藏的实现

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

演示：小提琴

更新：
基于@BLSully 的评论

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

演示：小提琴

Answer 2

我喜欢 Arun P Johny 的回答。这是我最初的想法（这段代码实现了隐藏/显示功能）

$(".used-for-some-action").click(function(e) {
    e.preventDefault()

    $(this).parents("tr").next().is(":visible") ? $(this).parents("tr").next().hide() : $(this).parents("tr").next().show();
});

小提琴：http: //jsfiddle.net/DQMht/1/

Answer 3

我会保持简单。您正在使用 JavaScript，因此当页面加载时，只需将一个类添加到带有 a 的行<th>，然后使用该类。

$(function() {
    $("th").parent().addClass("hasTH");
});

然后，您可以简单地定位具有hasTH该类的行。

---

另一种选择是在页面加载时仍然这样做，但不是添加类，而是将行分组到新<tbody>元素中。这将为您提供最纯粹的 DOM 表示。

Answer 4

试试这个：

$("tr:has(th)").each(function(){
    if ($(this).find('th').length==2) {
        // here you have this: that represent the row which have two td
    }
})