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でリスト・テーブル操作 - 行の上下移動

前へ

jQuery始めました。9(ラジオボタンで表示項目の変更)

次へ

onloadイベントとjQueryのreadyメソッドの違い