Come spostare la riga della tabella in jQuery?

Question

Supponiamo di avere collegamenti con le frecce su/giù per spostare in alto o in basso una riga di tabella in ordine. Quale sarebbe il modo più semplice per spostare quella riga su o giù di una posizione (usando jQuery)?

Non sembra esserci un modo diretto per farlo usando i metodi incorporati di jQuery, e dopo aver selezionato la riga con jQuery, non ho trovato un modo per spostarlo. Inoltre, nel mio caso, rendere le righe trascinabili (cosa che ho già fatto con un plugin in precedenza) non è un'opzione.

Answer 1

Si potrebbe anche fare qualcosa di piuttosto semplice con la regolazione su/giù ..

dato i tuoi link hanno una classe di up o down si può legare questo in su nel gestore click dei link. Questo è anche nel presupposto che i collegamenti siano all'interno di ciascuna riga della griglia.

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

    }); 

});

Provare a utilizzare JSFiddle