Comment déplacer une ligne de table dans jQuery?

Question

Dites que j'ai des liens avec les flèches haut/bas pour déplacer une rangée de table vers le haut ou vers le bas dans l'ordre. Quelle serait la manière la plus directe de déplacer cette rangée vers le haut ou le bas d'une position (en utilisant jQuery)?

Il ne semble pas y avoir de moyen direct de faire cela en utilisant les méthodes intégrées de jQuery, 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, rendre les lignes draggables (ce que j'ai fait avec un plugin auparavant) n'est pas une option.

Answer 1

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

donné vos liens ont une classe de up ou down vous pouvez câbler cela dans le gestionnaire de clic des liens. Ceci est également sous l'hypothèse que les liens sont dans chaque rangée 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> 

Demo - JsFiddle

Answer 2

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