Jak przenieść wiersz tabeli w jQuery?

Question

Powiedz, że miałem linki ze strzałkami w górę/w dół, aby przenieść wiersz tabeli w górę lub w dół. Jaki byłby najprostszy sposób przeniesienia tego rzędu w górę lub w dół o jedną pozycję (przy użyciu jQuery)?

Nie wydaje się, że można to zrobić w sposób bezpośredni za pomocą wbudowanych metod jQuery, a po wybraniu wiersza z jQuery nie znalazłem sposobu na przeniesienie go. Również w moim przypadku uczynienie wierszy przeciągalnymi (co zrobiłem wcześniej z wtyczką) nie jest opcją.

Answer 1

Można również zrobić coś całkiem proste z regulacją góra/dół ..

podane linki mieć klasę up lub down można ten przewód w module obsługi kliknięcia łącza. Jest to również przy założeniu, że linki znajdują się w każdym rzędzie siatki.

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

    }); 

});

Spróbuj użyć JSFiddle