Cách di chuyển hàng trong bảng trong jQuery?

Question

Giả sử tôi có các liên kết với các mũi tên lên/xuống để di chuyển hàng trong bảng lên hoặc xuống theo thứ tự. Điều gì sẽ là cách đơn giản nhất để di chuyển hàng đó lên hoặc xuống một vị trí (bằng cách sử dụng jQuery)?

Dường như không có cách nào trực tiếp để làm điều này bằng cách sử dụng các phương thức dựng sẵn của jQuery và sau khi chọn hàng với jQuery, tôi không tìm thấy cách nào để di chuyển nó. Ngoài ra, trong trường hợp của tôi, làm cho các hàng có thể kéo được (mà tôi đã thực hiện với một plugin trước đó) không phải là một tùy chọn.

Answer 1

Bạn cũng có thể làm điều gì đó khá đơn giản với những điều chỉnh lên/xuống ..

cho liên kết của bạn có một lớp học của up hoặc down bạn có thể dây này lên trong xử lý bấm vào các liên kết. Điều này cũng theo giả định rằng các liên kết nằm trong mỗi hàng của lưới.

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

    }); 

});

Hãy thử sử dụng JSFiddle