ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

เราขอแนะนำตัวอย่างโค้ด jQuery สำหรับการ sort & filter ตาราง เมื่อกรอกข้อความใน Textbox แล้วให้ javascript ซ่อนแถวตารางที่ไม่ตรงกับคำค้น และแสดง แถวตารางที่ตรงกับคำค้น โดยเทคนิคนี้ มักจะเรียกกันว่า การทำ Searchtable จะเขียนยังไง ลองมาอ่านดูคะ

ตัวอย่าง การใช้งาน Jquery สำหรับ ซ่อน/แสดง แถวตาราง หรือ การทำ Search table show/hide row แบบ Realtime

โดยตัวอย่างโค้ด เราจะสร้าง Texbox ขึ้นมาหนึ่งตัว ทำหน้าที่เป็น Search field และเมื่อเรากรอกคำค้นใน Searchbox นั้น ก็จะมี Function jQuery ที่ทำงานร่วมกัน ทำหน้าที่สำหรับ ซ่อน Row ที่ไม่ตรงกับคำค้น และ แสดง Row ที่ตรงกับคำค้น ตัวอย่างการแสดงผลก็จะตามด้านล่างนี้เลย

อธิบายการทำงานของโค้ด Search table real-time

ส่วนที่ 1 คือส่วนของ Textbox เราจะทำการกำหนด ID ให้ Element ตามตัวอย่างนี้

<input type="text" id="FilterTextBox" class="form-control" placeholder="Search for text to filter" />

ส่วนที่ 2 คือส่วนของตาราง โดยเราจะกำหนด Class สำหรับตารางที่ชื่อว่า filterable เหมือนตัวอย่างด้านล่าง

<table class="filterable">
    <thead>
    <tr>
        <th>Month</th>
        <th>Value 1</th>
        <th>Value 2</th>
        <th>Value 3</th>
        <th>Value 4</th>
        <th>Value 5</th>
        <th>Value 6</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

ส่วนที่ 3 คือส่วนของ javascript หลักการทำงานคือ เมื่อค้นหาใน Textbox ตัว Function ก็จะทำงานทันทีร่วมกับ event keyup

<script>
    jQuery(document).ready(function($){
        $(".filterable tr:has(td)").each(function () {
            var t = $(this).text().toLowerCase(); //all row text
            $("<td class='indexColumn'></td>")
                .hide().text(t).appendTo(this);
        }); //each tr
        $("#FilterTextBox").keyup(function () {
            var s = $(this).val().toLowerCase().split(" ");
            //show all rows.
            $(".filterable tr:hidden").show();
            $.each(s, function () {
                $(".filterable tr:visible .indexColumn:not(:contains('"
                    + this + "'))").parent().hide();
                $(".filterable tr:visible .indexColumn:not(:contains('"
                    + this + "'))").parent().hide();
            }); //each
        }); //key up.
    });
</script>

แต่หากเพื่อน ๆ ไม่เข้าใจว่า Function มันทำงานยังไงหว่า ก็ไม่เป็นไหร่ แค่ Copy code ส่วนนี้ไปแปะไว้ในไฟล์งานของท่านแล้วก็ กำหนดชื่อ ID ของ Textbox และ Class ของ Table ให้ตรงกับตัวอย่างโค้ดของท่านก็จะทำงานได้เหมือนกัน

เป็นยังไงกันบ้างคะสำหรับบทความ วิธีทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

ดูเพลิน Admin - 16 ม.ค. 66
เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

ดูเพลิน Admin - 26 ม.ค. 66
แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65
Code script เช็คเลขบัตรประชาชน แบบ Real-time

Code script เช็คเลขบัตรประชาชน แบบ Real-time

ดูเพลิน Admin - 21 ธ.ค. 65
Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65
Javascript เทคนิค Check & Get ค่า Hash จาก URL

Javascript เทคนิค Check & Get ค่า Hash จาก URL

ดูเพลิน Admin - 26 ม.ค. 66
Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

ดูเพลิน Admin - 11 ม.ค. 66

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4