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

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> 

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

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(); 
}); 

如果你想在一个节中切换所有的行，当你点击标题行（这是我的用例，当我stum布莱德对此问题）：

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