ulとtableでの表の並べ替え

表の並べ替えは結構するのですが、tableに関してはいつも検索している気がするので備忘録として書いておきます。

ulの並べ替えサンプル

<ul class="sortable">
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    <li id="4">4</li>
    <li id="5">5</li>
</ul>
<script>
  $(function() {
      $(".sortable").sortable();
      $(".sortable").disableSelection();
  });
</script>

tableの並べ替えサンプル

<table class="sortable-table">
    <tbody>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
    <tr><td>D</td></tr>
    <tr><td>E</td></tr>
    </tbody>
</table>
<script>
  $(function() {
      $(".sortable-table tbody").sortable();
      $(".sortable-table tbody").disableSelection();
  });
</script>

ドラッグすることで並べ替え可能です。

値の取得はulの場合は

var result = $(".sortable").sortable("toArray");

で可能。
tableの場合は要素を全て取得するようにする必要があるみたいで1行でお手軽に取得は出来ないっぽいです。

HTML JQuery 自分用