web-dev-qa-db-ja.com

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

テーブルの行を順番に上下に移動するための上下矢印付きのリンクがあったとします。 （jQueryを使用して）その行を1つ上または下に移動する最も簡単な方法は何ですか？

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

javascriptjqueryhtmldom
66
Wilco

また、調整可能なアップ/ダウンで非常に簡単なことを行うこともできます。

リンクに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

168
Quintin Robinson
$(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を使用してみてください

11
Shemeemsha R A