JQuery alternar filas al hacer clic

Estoy tratando de ocultar/mostrar un subconjunto de filas al hacer clic en una fila con una identificación específica.JQuery alternar filas al hacer clic

A través de una gran cantidad de búsquedas en la web y un montón de intentos obtuve el siguiente código.

El único problema es que este código por algún motivo solo oculta/muestra el primer conjunto de filas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 

<head> 
      <title>Test</title> 

      <script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script> 

      <script type="text/javascript"> 

      $(document).ready(function() 
      { 
       $('#rowToClick').click(function() 
       { 
        $(this).nextAll('tr').each(function() 
        { 
         if ($(this).is('#rowToClick')) 
         { 
          return false; 
         } 
         $(this).toggle(); 
        }); 
       }); 
      }); 
      </script> 
     </head>   

<body> 
<table> 
    <tr id="rowToClick"><td>ClickMe</td></tr> 
    <tr id="Tr1"><td>Toggled</td></tr> 
    <tr id="Tr2"><td>Toggled</td></tr> 
    <tr id="Tr3"><td>Toggled</td></tr> 
    <tr id="Tr4"><td>Toggled</td></tr> 
    <tr id="Tr5"><td>Toggled</td></tr> 
    <tr id="rowToClick"><td>ClickMe</td></tr> 
    <tr id="Tr6"><td>Toggled</td></tr> 
    <tr id="Tr7"><td>Toggled</td></tr> 
    <tr id="Tr8"><td>Toggled</td></tr> 
    <tr id="Tr9"><td>Toggled</td></tr> 
    <tr id="Tr10"><td>Toggled</td></tr> 
</table> 
</body> 

</html>

¿Alguien tiene una sugerencia y/o posible reescritura del código?

actualización ---------- - La solución final -----------

que terminó con la solución a continuación basándose en la entrada de Brandon, ya que quería hacer más anidación con el mismo comportamiento, algo así como una vista de árbol plegable. Desafortunadamente eso significaba que tenía que agregar un atributo adicional para hacer un seguimiento del estado, pero puedo vivir con eso por ahora, hasta que encuentre otra forma (por ejemplo, verificar la visibilidad de la siguiente fila).

  $(document).ready(function() { 
      toggleRows('.module','.namespace'); 
      toggleRows('.namespace','.type'); 
      toggleRows('.type','.member'); 
     }); 

     function toggleRows(parentClass,subClass) 
     { 
      $(parentClass).click(function() { 

       if($(this).attr("value")=="collapsed")     
       { 
        $(this).attr("value","expanded"); 
        $(this).nextUntil(parentClass).filter(subClass).toggle(true); 
       } 
       else 
       { 
        $(this).attr("value","collapsed"); 
        $(this).nextUntil(parentClass).attr("value","collapsed"); 
        $(this).nextUntil(parentClass).toggle(false); 
       }  

      }); 
     }

Fuente

2011-03-29 Christian Mikkelsen

¿Has pensado en usar un complemento como tablesorter? http://blog.pengoworks.com/index.cfm/2008/3/28/Finished-jQuery-Tablesorter-mod-for-Collapsible-Table-Rows – iivel

Utilice .data() en lugar de .attr(). Es más compatible: '$ (this) .data (" value ")' y '$ (this) .data (" value "," expanded ")'. Además, encadene sus llamadas para evitar escanear el DOM 2x: '$ (this) .nextUntil (parentClass) .data (" value "," collapsed "). Toggle (false);' – Brandon

En primer lugar, no se puede tener varias filas con el mismo ID. En lugar de establecer id para "rowToClick", establece la clase css:

<tr class='rowToClick'><td>click me</td></tr>

A continuación, esto debería funcionar:

$(document).ready(function() 
     { 
      $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); }); 
     });

Fuente

2011-03-29 16:42:40 Brandon

esto se debe a que el atributo id solo se puede usar una vez para cada identificación en un documento. debe usar el atributo de clase en su lugar, y luego en su código jquery, acceder a los elementos con la clase rowToClick con el selector $ (". rowToClick").

Espero que esto ayude.

Andy

Fuente

2011-03-29 16:41:11 Andbdrew

Tome una mirada at this fiddle
Uso del selector de :not(), puede seleccionar todos los elementos tr que no tienen la identificación/clase que desea filtrar:

$('.rowToClick').click(function() 
{ 
    $('tr:not(.rowToClick)').toggle(); 
    //toggle all rows on the page that 
    //do not have the class rowToClick 
});

Tenga en cuenta que no puede tener dos elementos con la misma identificación: tiene dos filas con la identificación rowToClick. Use un class en su lugar.

Fuente

2011-03-29 16:43:23

Me enciendo el código para algo como esto:

<tr class="rowToClick" rel="1"><td>ClickMe</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="row1Collapse"><td>Toggled</td></tr> 
<tr class="rowToClick" rel="2"><td>ClickMe</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr> 
<tr class="row2Collapse"><td>Toggled</td></tr>

Entonces, algo como esto:

$('.rowToClick').click(function() 
{ 
    var rel = $(this).attr('rel'); 

    $('.row' + rel + 'Collapse').show(); // or hide, you get the idea 
});

Fuente

2011-03-29 16:43:23 Tejs

Creo que este es el comportamiento deseado:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title></title> 

    <script src="Includes/JavaScript/jQuery/version1.4.4/Core/jquery-1.4.4.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      // Also, just as an extra, use "context" to limit the scope of any jQuery selector-search. 
      // That way on large pages your selector doesn't search through the whole page, 
      // it only searches the tables HTML. 
      // Doing so is a short-cut for: $('#tblMyTable').find('tr.clickTrigger'); 
      var context = $('#tblMyTable'); 

      $('tr.clickTrigger', context).click(function() { 

       $(this).nextAll('tr').each(function() { 

        if ($(this).is('tr.clickTrigger')) 
         return false; 

        $(this).toggle(); 
       }); 
      }); 
     }); 
    </script> 


</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <table id="tblMyTable" cellpadding="0" cellspacing="0"> 
      <tr class="clickTrigger"> 
       <td>ClickMe</td> 
      </tr> 
      <tr id="Tr1"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr2"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr3"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr4"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr5"> 
       <td>Toggled</td> 
      </tr> 
      <tr class="clickTrigger"> 
       <td>ClickMe</td> 
      </tr> 
      <tr id="Tr6"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr7"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr8"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr9"> 
       <td>Toggled</td> 
      </tr> 
      <tr id="Tr10"> 
       <td>Toggled</td> 
      </tr> 
     </table> 
    </div> 
    </form> 
</body> 
</html>

Fuente

2011-03-29 17:04:24

<script> 
    function padre(id){ 
         var pa=$('.rowToClick_'+id); 
         $(pa).nextAll('tr').each(function(){ 
          if ($(this).is('.rowToClickEnd_'+id)) 
          { 
           $(this).toggle(); 
           return false; 
          } 
          $(this).toggle(); 
         }); 
        } 
       </script> 

    <table> 
     <tr class="rowToClick_1"><td><a href="javascript:padre('1')">+</a>Categoria 1</td></tr> 
     <tr id="Tr1" class="rowToClick_1_1"><td><a href="javascript:padre('1_1')">+</a>Categoria 1_1</td></tr> 
     <tr id="Tr1_1"><td>Categoria 1_1_1</td></tr> 
     <tr id="Tr1_2" class="rowToClickEnd_1_1"><td>Categoria 1_1_2</td></tr> 
     <tr id="Tr2"><td>Categoria 1_2</td></tr> 
     <tr id="Tr3"><td>Categoria 1_3</td></tr> 
     <tr id="Tr4"><td>Categoria 1_4</td></tr> 
     <tr id="Tr5" class="rowToClickEnd_1"><td>Toggled</td></tr> 
     <tr class="rowToClick"><td>ClickMe</td></tr> 
     <tr id="Tr6"><td>Toggled</td></tr> 
     <tr id="Tr7"><td>Toggled</td></tr> 
     <tr id="Tr8"><td>Toggled</td></tr> 
     <tr id="Tr9"><td>Toggled</td></tr> 
     <tr id="Tr10" class="rowToClickEnd"><td>Toggled</td></tr> 
    </table>

Fuente

2012-06-28 20:09:06

Se aplica a diferentes niveles –

agregar información acerca de cómo funciona tu respuesta. ayudará a otros. –

JQuery alternar filas al hacer clic

Respuesta

Cuestiones relacionadas