ข้ามไปที่เนื้อหาหลัก

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

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

[สอน 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

ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

       สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ

สร้างแบบฟอร์มล็อกอิน HTML + PHP

       ผมจะสร้างระบบตัวอย่างเพื่อแสดงให้เห็นการทำงานของสคริปต์ PHP ที่ใช้ในการล็อกอินอย่างง่ายๆ นะครับ โดยที่ผมจะสร้างโฟลเดอร์ใหม่ขึ้นในไดร์ฟที่เราได้กำหนดให้เป็น Directory Root สำหรับรันสคริปต์ PHP ซึ่งผมกำหนดเอาไว้ที่ D:\www ดังนั้นผมจะสร้างโฟลเดอร์ teacher_assistant ขึ้นมาใหม่จะได้พาธเป็น D:\www\teacher_assistant สำหรับการเข้าถึง จะใช้ URL ดังนี้ http://localhost/teacher_assistant หลังจากสร้างโฟลเดอร์เสร็จเรียบร้อยก็จะเริ่มกระบวนการเตรียมโครงสร้างโปรเจ็กต์ด้วยเครื่องมือช่วยเขียนโปรแกรมชื่อว่า eclipse ซึ่งดูวิธีการสร้างโปรเจ็กต์ได้จากบทความ เริ่มต้นสร้างโปรเจ็กต์ ด้วยโปรแกรม eclipse เครื่องมือเขียนโปรแกรม php ในบทความเป็นการสร้างโปรเจ็กต์ที่มีพาธเป็นโฟลเดอร์ login แต่ในที่นี้ต้องเป็นพาธให้ตรงกับโฟลเดอร์ใหม่ที่เราได้สร้างขึ้นด้วยนะครับ

PHP กับการคิดส่วนลดเป็นเปอร์เซ็น 5%, 10%, 20% ตามช่วงราคาที่กำหนด

<?php     $total_price = 1000;     $discount = 0;         if($total_price >= 500 && $total_price < 1001){         $discount = 5;     }elseif($total_price >= 1001 && $total_price <= 5000){         $discount = 10;     }elseif($total_price >= 5001){         $discount = 20;     }         $discount_bath = ($total_price*$discount)/100; ?> <pre> ซื้อสินค้าครบ 0 ถึง 499 บาท ไม่ได้ส่วนลด ซื้อสินค้าครบ 500 ถึง 1000 บาท ได้ส่วนลด 5% ซื้อสินค้าครบ 1001 ถึง 5000บาท ได้ส่วนลด 10% ซื้อสินค้าครบ 5001 บาทขึ้นไป ได้ส่วนลด 20% </pre> <h3>รวมราคาสินค้า = <?php echo number_format($total_price,2);?></h3> <h5>ส่วนลด = <?php echo $discount;?>%  (<?php echo $discount_bath;?> บาท)</h5> <h2>ราคาหลังส่วนลด = <?php echo number_format($total_price - $discount_bath,2);?>บาท</h2> "PHP ไม่ได้สร้างสุดยอดโปรแกรม แต่ PHP ช่วยให้งานคุณง่ายขึ้นต