jQuery - cómo seleccionar todas las filas de la tabla entre dos filas de la tabla en la misma mesa

Question

Tengo una tabla que tiene una estructura como esta (td omitido)

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

Cuando el usuario haga clic en la fila que necesito para ocultar todas las filas hasta la siguiente fila que tiene clase "encabezado". ¿Cuál sería la forma más fácil de lograr esto? Algo en esta línea, encuentre todas las filas que tengan encabezado de clase, encuentre en el índice de fila de lista de la fila cliqueada, encuentre el índice de fila de la siguiente fila con la misma clase, y luego seleccione todas las filas dentro de estas dos indices.

Answer 1

Usted podría intentar algo como:

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

Se podía hacer:

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

O si usted tiene más de un separaciones por el estilo:

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

Suponiendo que se desea ocultar todas las filas entre las cabeceras cuando una fila en ese rango se hace clic en:

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

Esto itera sobre los hermanos anteriores/siguientes (que son filas), ocultando cada uno hasta que encuentra otra fila con la clase header. El return false terminará el ciclo. Probado en Firefox 3.

función correspondiente para mostrar filas cuando se hace clic en la cabecera:

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

Answer 4

que iba a tratar usando next() y prev () en la fila en la que se hace clic, y recorra ambas direcciones para encontrar las filas que desea eliminar. simplemente deténgase cuando llegue a las filas del encabezado.

Answer 5

lo hago así (Soporta 2 niveles de cabeceras)

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 usted puede cambiar su estructura de tabla a esto:

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

A continuación, esta simple línea a hacer:

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

Si desea alternar todas las filas en una sección al hacer clic en la fila del encabezado (ese era mi caso de uso cuando estuve sangrado sobre esta Pregunta):

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