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>

...我想使用Javascript / jQuery选择两个标头之间的所有<tr> - 元素为了提供如下功能：

隐藏属于某个标题的所有问题。
自动编辑<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

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，因此在加载页面时，只需将类添加到<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
    }
})

使用JQuery选择标头之间的所有表行

4 个答案: