jQuery에서 테이블 행을 이동하는 방법은 무엇입니까?

jQuery에서 테이블 행을 이동하는 방법은 무엇입니까?

---

테이블 행을 순서대로 위아래로 이동하기위한 위 / 아래 화살표가있는 링크가 있다고 가정 해 보겠습니다. 해당 행을 한 위치 위 또는 아래로 이동하는 가장 간단한 방법은 무엇입니까 (jQuery 사용)?

jQuery의 기본 제공 메서드를 사용하여이 작업을 수행하는 직접적인 방법이없는 것 같습니다. jQuery로 행을 선택한 후 이동하는 방법을 찾지 못했습니다. 또한 제 경우에는 행을 드래그 가능하게 만드는 (이전에 플러그인으로 수행 한 작업)은 옵션이 아닙니다.

---

위 / 아래 조절 기능으로 매우 간단한 작업을 수행 할 수도 있습니다.

링크에 클래스가 up있거나 down링크의 클릭 처리기에 연결할 수 있습니다. 이것은 또한 링크가 그리드의 각 행 내에 있다는 가정하에 있습니다.

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

데모-JsFiddle

---

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

  });

});

JSFiddle을 사용해보십시오

참고URL : https://stackoverflow.com/questions/1569889/how-to-move-table-row-in-jquery