Comment faire pour déplacer la rangée de table en jQuery?

Dire que j'ai eu des liens avec les flèches haut/bas pour déplacer une ligne de la table vers le haut ou vers le bas dans l'ordre. Quelle serait la façon la plus simple de déplacer cette ligne vers le haut ou le bas d'une position (à l'aide de jQuery)?

Il ne semble pas y avoir de moyen de le faire à l'aide de jQuery est intégré dans les méthodes, et après avoir sélectionné la ligne avec jQuery, je n'ai pas trouvé un moyen de le déplacer. Aussi, dans mon cas, rendant les lignes déplaçable (qui je l'ai fait avec un plugin précédemment) n'est pas une option.

Vous avez la possibilité d'utiliser une Grille de contrôle sur votre plate-forme?

InformationsquelleAutor Wilco | 2009-10-15

164

Vous pouvez aussi faire quelque chose d'assez simple avec le réglage vers le haut/vers le bas..

compte tenu de vos liens ont une classe de up ou down vous pouvez la relier dans le gestionnaire de clic sur des liens. C'est également sous l'hypothèse que les liens sont à l'intérieur de chaque ligne de la grille.

$(document).ready(function(){
    $(".up,.down").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
    });
});

HTML:

<table>
    <tr>
        <td>One</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Two</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Three</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Four</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Five</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
</table>

Démo - JsFiddle

merci pour cette. Si le tr rangée de style display none, alors comment puis-je déplacer les lignes de la rangée précédente qui s'affiche bloc ? si un style de ligne est affiché aucune, alors que je dois cliquer plusieurs fois pour déplacer vers le haut ou vers le bas. toute suggestion ?
Toutes les suggestions sur la façon de masquer le "Haut" lien pour la première ligne et le "Bas" lien pour la dernière ligne?
Quelque chose le long des lignes de $(".up,.down").show(); puis $("tr:first .up,tr:last .down").hide(); mais vous devrez peut-être ajuster les sélecteurs de vos besoins précis.
vous pouvez accomplir cela en utilisant prevAll et nextAll en place de prev et next et en passant :visible:first que le sélecteur.
une idée de comment puis-je échapper à la ligne d'en-tête (tr th)? d'autre dans ma situation, il se déplace jusqu'à la ligne d'en-tête, merci beaucoup
Je figure déjà, partager de la manière suivante : if ($(this).est(".jusqu'")) { ligne.insertBefore(rangée.prev("tr:a(td)")); } else { ligne.insertAfter(rangée.next()); }
Est-il un moyen pour animer ce ?

InformationsquelleAutor Quintin Robinson

$(document).ready(function () {
   $(".up,.down").click(function () {
      var $element = this;
      var row = $($element).parents("tr:first");

      if($(this).is('.up')){
         row.insertBefore(row.prev());
      } 
      else{
         row.insertAfter(row.next());
      }

  });

});

Essayez d'utiliser JSFiddle

peut raccourcir avec: var ligne = $(this).closest('tr');

InformationsquelleAutor Shemeemsha R A

Vous devez vous connecter pour publier un commentaire.