Skip to main content

Askboon

Simple Table Search

เราสามารถเขียนเว็บที่รองรับการค้นหาข้อความจากตารางแบบง่ายๆโดยใช้โค้ดไม่กี่บรรทัด ดังนี้

ส่วนของ HTML

เราต้องมีตารางที่มี id ของ table กำกับไว้ก่อน และใส่ input เข้าไปเพื่อใช้สำหรับรับคำค้น ตัวอย่างเช่น

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<input type="text" id="mySearch" placeholder="&#x1f50d; ใส่คำค้นที่นี่">
<table id="myTable">
    <tr>
        <td>1</td><td>aaa</td>
    </tr>
    <tr>
        <td>2</td><td>bbb</td>
    </tr>
    <tr>
        <td>3</td><td>ccc</td>
    </tr>
</table>

ส่วนของ Javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script>
    $(document).ready(function () {
        $("#mySearch").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    }); 
</script>

เพียงเท่านี้ คุณก็จะสามารถเพิ่มฟังก์ชั่นการค้นหาในตารางได้แบบง่ายๆในเว็บของคุณแล้ว