jQuery - comment sélectionner toutes les lignes de table entre deux rangées de table en même table

Question

J'ai une table qui a une structure comme celui-ci (td omis)

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

Lorsque l'utilisateur clique sur la ligne que je dois cacher toutes les lignes jusqu'à la ligne suivante qui a la classe "en-tête". Quel serait le moyen le plus simple d'y parvenir? Quelque chose le long de ces lignes, trouver toutes les lignes qui ont un en-tête de classe, trouver dans l'index de ligne de la ligne cliquée, trouver l'index de la rangée suivante avec la même classe, puis sélectionner toutes les lignes dans ces deux indices?

Answer 1

Vous pouvez essayer quelque chose comme:

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

Vous pouvez simplement faire:

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

Ou si vous avez plus d'une séparation comme ça:

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

En supposant que vous souhaitez masquer toutes les lignes entre les en-têtes quand une ligne dans cette plage est cliqué:

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

Ceci itére sur les frères et sœurs précédents/suivants (qui sont des lignes), se cachant chacun jusqu'à ce qu'il rencontre une autre rangée avec la classe header. Le return false terminera chaque boucle. Testé dans Firefox 3.

fonction correspondante pour afficher les lignes lorsque la tête est cliqué:

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

Answer 4

j'essayer d'utiliser suivant() et prev () sur la ligne sur laquelle vous avez cliqué et dans les deux directions pour trouver les lignes à supprimer. arrêtez juste quand vous arrivez aux lignes d'en-tête.

Answer 5

je le fais comme ça (il prend en charge 2 niveaux d'en-têtes)

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

Si vous pouvez modifier votre structure de table à ceci:

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

Ensuite, cette simple ligne va faire:

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

Si vous souhaitez basculer toutes les lignes d'une section lorsque vous cliquez sur la ligne d'en-tête (c'était mon cas d'utilisation lorsque j'ai commencé saignée sur cette question):

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