una - Usando JQuery para encontrar la siguiente fila de la tabla

obtener valor de input dentro de un td jquery

Question

Usando JQuery, ¿cómo vincular un evento de clic a una celda de tabla (a continuación, class = "expand") que cambiará la imagen src (que está en la celda cliqueada? Original será plus.gif, alternando con minus.gif) y ocultar / mostrar la fila inmediatamente debajo de esa fila según la 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>

Answer 1

No necesita mostrar y ocultar 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();
    });
});

editar: De acuerdo, agregué 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.

Answer 2

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.

Answer 3

¿Nadie ama al operador ternario? :) Entiendo las consideraciones de legibilidad, pero por alguna razón hace clic para que lo escriba 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 no tiene el beneficio de ninguna clase extraña.

Answer 4

Así es como se configuran las imágenes en 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>

Cambia el evento onClick a tu 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;");
    }
}

Answer 5

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

El más cercano agarra el TR más cercano, en este caso el primer padre. 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 me acabo de fadeToggle() para alternar si se muestra o no. Especificar los selectores realmente ayuda a reducir lo que manejará.