目次

sortable - 並び替えられるテーブル

サンプルコード

<script type="text/javascript">
   var option={
       stop : function(){
           var data=[];
           $("tr td.key","#sortable tbody").each(function(i,v){
               data.push(v.innerHTML);
           });
           $('#viewSortlist').html(data.toString()).css("background-color","#eee");
       }
   };
   $(function() {
       $("#sortable tbody").sortable(option);
       $("#sortable tbody").disableSelection();
   });
</script>

<table id="sortable">
    <tr><th>0</th><th>000</th></tr>
    <tbody>
       <tr><td class="key">1</td><td>AAA</td></tr>
       <tr><td class="key">2</td><td>BBB</td></tr>
       <tr><td class="key">3</td><td>CCC</td></tr>
       <tr><td class="key">4</td><td>DDD</td></tr>
   </tbody>
</table>

<div id="viewSortlist">ここへ並べ替えた順番を出力</div>

並び替えられるテーブル

jQuery - Sortable はオブジェクトの id を指定して sortable と書くだけで簡単にリストを並べ替えることができる。 しかし、テーブルはそれだけでは意図した動作をしない。 テーブルの行を並べ替えるには、tbody タグを入れる。 

       $("#sortable tbody").sortable(option);
<table id="sortable">
    <tr><th>0</th><th>000</th></tr>
    <tbody>
       <tr><td class="key">1</td><td>AAA</td></tr>

タイトル行は動かしたくない

tbody タグ内の要素を動かすように指定しているので、タイトル行を tbody の外に出せばいい 

<table id="sortable">
    <tr><th>0</th><th>000</th></tr>
    <tbody>

並び替えた結果を取得

テーブルに id など一意の数字を振っておいて、並び替え後に結果を取得する 

   var option={
       stop : function(){
           var data=[];
           $("tr td.key","#sortable tbody").each(function(i,v){
               data.push(v.innerHTML);
           });
           $('#viewSortlist').html(data.toString()).css("background-color","#eee");
       }
   };
       $("#sortable tbody").sortable(option);
<div id="viewSortlist">ここへ並べ替えた順番を出力</div>