Monday 16 February 2015

Pindah posisi row di table ke atas dan ke bawah (Up and Down) dengan JQuery

Untuk memindahkan baris tabel atas dan ke bawah pada table web aplikasi (HTML), bisa menggunakan bantuan JQuery seperti contoh berikut,


JQuery

$(document).ready(function () {
        $(".up, .down, .top, .bottom").click(function () {
            var row = $(this).parents("tr:first");
            alert(row.find(".sequence").val());
            if ($(this).is(".up")) {
                row.insertBefore(row.prev());
            } else if ($(this).is(".down")) {
                row.insertAfter(row.next());
            } else if ($(this).is(".top")) {
                row.insertBefore($("table tr:first"));
            } else {
                row.insertAfter($("table tr:last"));
            }
        });

});

HTML

<table>
    <tr>
        <td>Row Satu</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a> 
        </td>
    </tr>
    <tr>
        <td>Row Dua</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a> 
            <a href="#" class="bottom">Bottom</a>  
        </td>
    </tr>
    <tr>
        <td>Row Tiga</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a> 
            <a href="#" class="bottom">Bottom</a> 
        </td>
    </tr>
</table>
 
 
Link up, memindahkan baris(row) satu tingkat ke atas.
Link down, memindahkan baris(row) satu tingkat ke bawah.
Link Top, memindahkan baris(row) ke posisi paling atas.
Link Bottom, memindahkan baris(row) ke posisi paling bawah.
 

No comments:

Post a Comment