[สอน jQuery] เรียงลำดับข้อมูลด้วยตัวเลขหัวข้อที่กำหนดเอง

จากตัวอย่างในภาพ เมื่อเรากรอกตัวเลขหัวข้อของรายการในแถวใดๆ ก็จะเกิดการจัดเรียงลำดับอัตโนมัติทันที ตามฟังก์ชั่นที่เราเรียกใช้

วิดีโอตัวอย่าง




ซอร์สโค้ด 

<script>
function sortTable() {
    var obj;
    var row;
    var thisValue = '';
    var checkValue = '';
    var len = $(".sort_number").length -1;
    for(j=len;j>0;j--){
        for(i=len;i>0;i--){
            obj = $(".sort_number:eq("+ i +")");
            row = obj.parents("tr:first");
            thisValue = obj.val();
            checkValue = $(".sort_number:eq("+ (i-1) +")").val();
            //alert(thisValue + " < " + checkValue);
            if(thisValue < checkValue){
                row.insertBefore(row.prev());
            }
        }
    }
}


$(document).ready(function(){
    $(".up,.down").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
    });

    $(".sort_number").change(function(){
        sortTable();
    });
});
</script>

<style>

</style>

<h3>เรียงลำดับข้อมูลด้วยตัวเลขที่กำหนด</h3>


<table>
    <tr>
        <td><input type="text" class="sort_number" /></td>
        <td>One</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td><input type="text" class="sort_number" /></td>
        <td>Two</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td><input type="text" class="sort_number" /></td>
        <td>Three</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td><input type="text" class="sort_number" /></td>
        <td>Four</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td><input type="text" class="sort_number" /></td>
        <td>Five</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
</table>

ที่มา : http://stackoverflow.com/questions/1569889/jquery-move-table-row