Usando JQuery para encontrar la siguiente fila de la tabla


15

Usando JQuery, cómo se vincula un evento click a una celda de la tabla (debajo, class = "expand") que cambiará la imagen src (que está en la celda cliqueada - el original sea ​​plus.gif, alternando con minus.gif) y oculte/muestre la fila inmediatamente debajo de ella en función de si esa fila tiene una clase de "ocultar". (muéstrelo si tiene una clase de "ocultar" y ocultar si no tiene una clase de "ocultar"). Soy flexible con el cambio de identificadores y clases en el marcado.

Gracias

filas de la tabla

<tr> 
<td class="expand"><img src="plus.gif"/></td> 
<td>Data1</td><td>Data2</td><td>Data3</td> 
</tr> 
<tr class="show hide"> 
<td> </td> 
<td>Data4</td><td>Data5</td><td>Data6</td> 
</tr> 
18

No es necesario el mostrar y ocultar las etiquetas:

$(document).ready(function(){ 
    $('.expand').click(function() { 
     if($(this).hasClass('hidden')) 
      $('img', this).attr("src", "plus.jpg"); 
     else 
      $('img', this).attr("src", "minus.jpg"); 

     $(this).toggleClass('hidden'); 
     $(this).parent().next().toggle(); 
    }); 
}); 

EDIT: Bueno, he añadido el código para cambiar la imagen. Esa es solo una forma de hacerlo. Agregué una clase al atributo expandir como una etiqueta cuando la fila que sigue está oculta y la eliminé cuando se mostró la fila.

  0

¿No te encanta jQuery? En lugar de '$ (this) .find ('img')' puede usar '$ ('img', this)' un poco más conciso. La función '$' acepta un segundo parámetro. Cuando se usa, jQuery solo busca el selector en el contexto de 'this'. 23 sep. 082008-09-23 20:30:33

  0

Gracias, hice esos cambios. 23 sep. 082008-09-23 20:37:07

  0

que se siente un poco atrás para mí. todo lo demás se lee de izquierda a derecha, mientras que con esa sintaxis hay que leer de derecha a izquierda. ambos tienen exactamente el mismo efecto, por lo que generalmente trato de mantener el estilo $ (this) .find (...). 20 oct. 082008-10-20 01:42:46

+2

Me pregunto si hay alguna diferencia de rendimiento. P.ej. ¿Usar uno u otro causa código diferente para ejecutar dentro de las tripas de jQuery? 06 mar. 092009-03-06 19:06:15


-2

Esta es la forma en que las imágenes se establecieron en el html

<tr> 

<td colspan="2" align="center" 
<input type="image" src="save.gif" id="saveButton" name="saveButton" 
    style="visibility: collapse; display: none" 
    onclick="ToggleFunction(false)"/> 

<input type="image" src="saveDisabled.jpg" id="saveButtonDisabled" 
     name="saveButton" style="visibility: collapse; display: inline" 
     onclick="ToggleFunction(true)"/> 
</td> 
</tr> 

cambiar el evento onClick a su propia función que está en JS para alternar entre ellos.

En el

ToggleFunction(seeSaveButton){  
    if(seeSaveButton){ 
     $("#saveButton").attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
     $("#saveButtonDisabled").attr("disabled", true) 
           .attr("style", "display: inline;"); 
    }  
    else {  
     $("#saveButton").attr("disabled", false) 
         .attr("style", "display: inline;"); 
     $("#saveButtonDisabled") 
         .attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
    } 
} 
  0

Si aplica sangría a cada línea de código en 4 espacios, aparece como un bloque de "código", mostrando etiquetas de apertura, etc. 23 sep. 082008-09-23 20:28:27


1

Prueba esto ...

//this will bind the click event 
//put this in a $(document).ready or something 
$(".expand").click(expand_ClickEvent); 

//this is your event handler 
function expand_ClickEvent(){ 
    //get the TR that you want to show/hide 
    var TR = $('.expand').parent().next(); 

    //check its class 
    if (TR.hasClass('hide')){ 
     TR.removeClass('hide'); //remove the hide class 
     TR.addClass('show'); //change it to the show class 
     TR.show();    //show the TR (you can use any jquery animation) 

     //change the image URL 
     //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'minus.gif'); 
    } else { 
     TR.removeClass('show'); //remove the show class 
     TR.addClass('hide'); //change it to the hide class 
     TR.hide();    //hide the TR (you can use any jquery animation) 

     //change the image URL 
    //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'plus.gif'); 
    } 
} 

Espero que esto ayude.

  0

gracias, ese es un código útil .... pero $ ('. Expand img') afectará a todos las imágenes en la clase expandir ... solo quiero aplicar una imagen en la celda de la tabla (<td>) 23 sep. 082008-09-23 20:36:57


9

¿A nadie le gusta el operador ternario? :) entiendo consideraciones de legibilidad, pero por alguna razón que haga clic para mí escribir como:

$(document).ready(function() { 
    $(".expand").click(function() { 
      $("img",this).attr("src", 
       $("img",this) 
        .attr("src")=="minus.gif" ? "plus.gif" : "minus.gif" 
      ); 
      $(this).parent().next().toggle(); 
    }); 
}); 

... y tiene la ventaja de no hay clases extrañas.


3

Tuve que resolver este problema recientemente, pero el mío involucraba algunas tablas anidadas, por lo que necesitaba una versión más específica y segura de javascript. Mi situación era un poco diferente porque tenía contenidos de un td y quería cambiar el próximo TR, pero el concepto sigue siendo el mismo.

$(document).ready(function() { 
    $('.expandButton').click(function() { 
     $(this).closest('tr').next('tr.expandable').fadeToggle(); 
    }); 
}); 

Más cercano toma el TR más próximo, en este caso el primer progenitor. Podría agregar una clase de CSS allí si quiere ser extremadamente específico. Luego especifico tomar el próximo TR con una clase de expandible, el objetivo para este botón. Luego solo fadeToggle() para alternar si se muestra o no. Especificar los selectores realmente ayuda a reducir lo que manejará.