jQuery - wie alle Tabellenzeilen zwischen zwei Tabellenzeilen in derselben Tabelle wählen

Question

Ich habe eine Tabelle, die Struktur wie diese (td weggelassen) hat

<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> 

Wenn Benutzer klicken Sie auf die Zeile ich alle Zeilen zu verstecken brauchen bis zur nächsten Zeile, die die Klasse "header" hat. Was wäre der einfachste Weg, dies zu erreichen. Finden Sie in diesem Zusammenhang alle Zeilen mit dem Klassenheader, finden Sie im Listenzeilenindex der angeklickten Zeile den Zeilenindex der nächsten Zeile mit derselben Klasse und wählen Sie dann alle Zeilen innerhalb dieser beiden Indizes aus.

Answer 1

Sie etwas versuchen könnte wie:

$(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

Sie könnten nur tun:

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

Oder wenn Sie mehr als eine Trennungen wie folgt aus:

$('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

Unter der Annahme, dass Sie alle Zeilen zwischen Header, wenn eine Zeile in diesem Bereich ausblenden möchten wird geklickt:

Dies iteriert über die vorherigen/nächsten Geschwister (das sind Zeilen), versteckt jedes, bis es eine andere Zeile mit Klasse header trifft. Die return false beendet jede Schleife. Getestet in Firefox 3.

entsprechende Funktion Zeilen zu zeigen, wenn sich Header geklickt:

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

Answer 4

Ich würde versuchen, mit next() und zurück () in der Zeile, auf die geklickt wurde, und durchqueren Sie beide Richtungen, um die Zeilen zu finden, die Sie entfernen möchten. hör einfach auf, wenn du zu den Kopfzeilen kommst.

Answer 5

ich es so machen (es unterstützt 2 Ebenen von Headern)

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

Wenn Sie Ihre Tabellenstruktur diese ändern können:

<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> 

Dann ist diese einfache Linie tun:

Wenn Sie alle Zeilen in einem Abschnitt umschalten möchten, wenn Sie auf die Kopfzeile klicken (das war mein Anwendungsfall, wenn ich stum blutete über diese Frage):

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