Usando JQuery para encontrar la siguiente fila de la tabla

Question

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> 

Answer 1

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.

Answer 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;"); 
    } 
} 

Answer 3

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 4

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

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

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