Question

我有一个像这样的结构的表（td省略）

<table>
<tr class="header">...</tr>
<tr class="row">...</tr>
<tr class="row">...</tr>
<tr class=="header">...</tr>
<tr class="row">...</tr>
<tr class="row">...</tr>
</table>

当用户点击该行时，我需要隐藏所有行，直到具有“header”类的下一行。实现这一目标的最简单方法是什么？沿着这些行查找所有具有类标题的行，在单击行的列表行索引中查找具有相同类的下一行的行索引，然后选择这两个标记中的所有行？

Answer 1

您可以尝试以下方式：

$(document).ready($('table tr').click(
  function () {
    var tr = $(this).nextAll('tr');
    for (i = 0; i < tr.length; i++) {
      var class = $(tr[i]).attr('class');
      if (class == 'row')
        $(tr[i]).hide()
      else {
        if (class == 'header')
          return;
      }
    }
  }
));

Answer 2

你可以这样做：

$('table tr.row').hide();

或者，如果你有多个这样的分离：

$('table tr.header').click(function(){
    var rowsToHide = [];
    var trs = $('table tr');
    //let's get the index of the tr clicked first.
    var idx = trs.index(this);
    //now loop untill next header
    for(var i = idx+1; i < trs.length; i++){
        if(trs[i].attr('class') == 'row'){
            rowsToHide.push(trs[i]);
        } else {
            break;
        }
    }

    // now hide the array of row elements
    $(rowsToHide).hide();
})

Answer 3

假设您想要在单击该范围内的行时隐藏标题之间的所有行：

$('table tr.row').click( function() {
    $(this).hide();
    $(this).prevAll('tr').each( function() {
        if ($(this).hasClass('header')) {
           return false;
        }
        $(this).hide();
    });
    $(this).nextAll('tr').each( function() {
        if ($(this).hasClass('header')) {
           return false;
        }
        $(this).hide();
    });
});

迭代上一个/下一个兄弟节点（即行），隐藏每个兄弟节点，直到它遇到另一个类header的行。 return false将终止每个循环。在Firefox 3中测试。

在单击标题时显示行的相应函数：

$('table tr.header').click( function() {
    $(this).nextAll('tr').each( function() {
        if ($(this).hasClass('header')) {
            return false;
        }
        $(this).show();
    });
});

Answer 4

我尝试在单击的行上使用next（）和prev（），并遍历两个方向以查找要删除的行。当你到达标题行时停止。

Answer 5

我这样做（它支持2级标题）

function toggleCollapse(source, destinationClass) {
    var isHidden = source.hasClass('collapsed');
    var current = source;
    while (true) {
        current = current.next("tr:visible");

        if (current.length == 0 || current.hasClass(destinationClass))
            break;

        if (current.hasClass("level2grp"))
            toggleCollapse(current, "level2grp")

        if (isHidden)
            current.show();
        else
            current.hide();
    }

    source.toggleClass('collapsed');
}

Answer 6

如果您可以将表格结构更改为：

<table>
  <tbody>
    <tr class="header">...</tr>
    <tr class="row">...</tr>
    <tr class="row">...</tr>
  </tbody>
  <tbody>
    <tr class=="header">...</tr>
    <tr class="row">...</tr>
    <tr class="row">...</tr>
  </tbody>
</table>

然后这个简单的行将会：

$('.row').click(function(){
    $(this).nextAll('tr').hide();
});

如果要在单击标题行时切换节中的所有行（当我偶然发现此问题时，这是我的用例）：

$('.header').click(function(){
    $(this).nextAll('tr').toggle();
});

jQuery - 如何选择同一个表中两个表行之间的所有表行

6 个答案: