JQuery'de tablo satırı nasıl taşınır?

Question

Bir tablo sırasını sırayla yukarı veya aşağı hareket ettirmek için yukarı/aşağı oklarla bağlantılar yaptığımı varsayalım. Bu sırayı yukarı veya aşağı konumlandırmak için en basit yol hangisi olurdu (jQuery kullanarak)?

sonra taşımak için jQuery'nin yöntemlerle inşa ve jQuery ile satır seçtikten sonra, ben bulamadım bir yolunu kullanarak bunu yapmak için herhangi bir doğrudan bir yol olarak görünmüyor. Ayrıca, benim durumumda, satırları sürüklenebilir yapmak (önceden bir eklenti ile yaptım) bir seçenek değildir. bağlantılarınızı verilen Ayrıca yukarı/aşağı ayarlanabilen ile oldukça basit bir şeyi yapabilirdi

Answer 1

..

up bir sınıf var ya down Eğer bağlantıların tıklama işleyicisi bu kadar bağlayabilirsiniz. Bu aynı zamanda bağlantıların şebekenin her satırında olduğu varsayımı altındadır.

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

    }); 

});

deneyin kullanarak JSFiddle