====== sortable - 並び替えられるテーブル ====== ===== サンプルコード =====
0000
1AAA
2BBB
3CCC
4DDD
ここへ並べ替えた順番を出力
===== 並び替えられるテーブル ===== jQuery - [[http://jqueryui.com/demos/sortable/|Sortable]] はオブジェクトの id を指定して sortable と書くだけで簡単にリストを並べ替えることができる。 しかし、テーブルはそれだけでは意図した動作をしない。 テーブルの行を並べ替えるには、tbody タグを入れる。 $("#sortable tbody").sortable(option); ===== タイトル行は動かしたくない ===== tbody タグ内の要素を動かすように指定しているので、タイトル行を tbody の外に出せばいい
0000
1AAA
===== 並び替えた結果を取得 ===== テーブルに 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);
ここへ並べ替えた順番を出力
0000