jQueryでテーブル行を移動するには？

Question

私はテーブルの行を上下に動かすための上下矢印とリンクしていると言います。その行を1つの位置（jQueryを使用して）上または下に移動する最も簡単な方法は何ですか？

jQueryの組み込みメソッドを使用してこれを行う直接的な方法はないようですが、jQueryを使用して行を選択した後、移動する方法が見つかりませんでした。また、私の場合は、行をドラッグ可能にする（以前はプラグインで行っていた）ことはオプションではありません。あなたはまた、アップ/ダウン調整可能で非常に単純な何かができる

Answer 1

...あなたのリンクを与え

あなたは、リンクのクリックハンドラでこれをアップ配線できdownupのクラスを持っていますか。これは、リンクがグリッドの各行内にあることも前提としています。

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

    }); 

}）。

はJSFiddle