Utiliser JQuery pour trouver la ligne de tableau suivante

À l'aide de JQuery, comment voulez-vous lier un événement click à une cellule de tableau (ci-dessous class="expand") qui va changer l'image de la src (qui est dans l'cliqué sur la cellule d'origine sera plus.gif, en alternance avec minus.gif) et afficher/masquer la ligne immédiatement au-dessous selon que cette ligne a une classe de "se cacher". (montrer si c'est une classe de "cacher" et se cacher si elle n'a pas une classe de "cacher"). Je suis flexible avec l'évolution des id et des classes dans le balisage.

Grâce

Lignes de la Table

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

source d'informationauteur Jay Corbett | 2008-09-23

  1. 18

    Vous n'avez pas besoin de l'afficher et de masquer tags:

    $(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: Bon, j'ai ajouté le code pour modifier l'image. C'est juste une façon de le faire. J'ai ajouté une classe à l'expansion de l'attribut de balise lorsque la ligne qui suit est caché et l'a enlevée lorsque la ligne a été montré.

  2. 9

    Personne n'a de l'amour pour l'opérateur ternaire? 🙂 Je comprends la lisibilité des considérations, mais pour quelque raison il clique pour moi de l'écrire comme:

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

    ...et a l'avantage de ne étrangères classes.

  3. 3

    J'ai eu à résoudre ce problème récemment, mais la mienne, certaines tables imbriquées, j'ai donc besoin d'un plus spécifiques, plus sûr de la version de javascript. Ma situation était un peu différente, car j'avais le contenu d'un td et je voulais basculer le prochain TR, mais le concept reste le même.

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

    Plus proche attrape le plus proche de chez TR, dans ce cas, le premier parent. Vous pouvez ajouter une classe CSS sur place si vous désirez obtenir de très spécifique. Puis-je indiquer pour attraper le prochain TR avec une classe de extensible, la cible de ce bouton. Ensuite, j'ai juste fadeToggle() elle de choisir si elle est affichée ou pas. En précisant les sélecteurs vraiment permet de limiter ce qu'il va traiter.

  4. 1

    ...

    //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');
   }
}

    Espère que cette aide.

  5. -2

    C'est la façon dont les images sont définis dans le code 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>

    Changer le onClick événement à votre propre fonction en JS pour basculer entre elles.

    Dans le 

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