jQuery始めました。11(テーブル操作 順序の入れ替え)
function update_row_index() { $("#test-list li").each(function (i) { var data_input = $('input[name="data"]', this); var vals = data_input.val().split(":"); data_input.val((i + 1) + ":" + vals[1]); }); } $(document).ready(function() { $("#test-list .up-control").click(function (e) { e.preventDefault(); var row = $(this).parent(); if (row.not(":first")) { row.insertBefore(row.prev()); update_row_index(); } }); $("#test-list .down-control").click(function (e) { e.preventDefault(); var row = $(this).parent(); if (row.not(":last")) { row.insertAfter(row.next()); update_row_index(); } }); });
<ul id="test-list"> <li class="test-row"> <input type="hidden" name="data" value="1:id1" /> <span class="title">データ1</span> <a href="#" class="control up-control">上へ</a> <a href="#" class="control down-control">下へ</a> </li> <li class="test-row"> <input type="hidden" name="data" value="2:id2" /> <span class="title">データ2</span> <a href="#" class="control up-control">上へ</a> <a href="#" class="control down-control">下へ</a> </li> <li class="test-row"> <input type="hidden" name="data" value="3:id3" /> <span class="title">データ3</span> <a href="#" class="control up-control">上へ</a> <a href="#" class="control down-control">下へ</a> </li> </ul>サンプル
引用元: jQueryでリスト・テーブル操作 - 行の上下移動
フォローしませんか?