jquery - mostrar - ocultar tabla con javascript

JQuery alternar filas al hacer clic (6)

Cambiaría tu código a 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 });

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

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

El único problema es que este código por alguna razón 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 - Solución final -----------

Terminé con la solución a continuación basada en la opinión 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); } }); }

Primero, no puede tener múltiples filas con la misma identificación. En lugar de establecer el id para "rowToClick", configure 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(); }); });

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

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>

Echa un vistazo a este violín
Usando el selector :not() , puede seleccionar todos los elementos tr que no tienen la id / class 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 el mismo ID: tiene dos filas con la rowToClick . Usa una class lugar.