thực hành - tìm kiếm trong bảng

Trong bài thực hành này, chúng ta sẽ tìm hiểu chức năng tìm kiếm nội dung trong bảng bằng HTML, CSS và JavaScript.

Tìm kiếm trong bảng


Nhập nội dung cần tìm vào thanh tìm kiếm.

Name Country
Alfreds Futterkiste Germany
Berglunds snabbkop Sweden
Island Trading UK
Koniglich Essen Germany
Laughing Bacchus Winecellars Canada
Magazzini Alimentari Riuniti Italy
North/South UK
Paris specialites France

 

Xem kết quả

Cách tạo tìm kiếm trong bảng


Bước 1) Thêm HTML:

Ví dụ

<input type="text" id="myInput" placeholder="Search for name ..." />
<table id="myTable">
    <tr>
        <th style="width:50%">Name</th>
        <th style="width:50%">Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Berglunds snabbkop</td>
        <td>Sweden</td>
    </tr>
    <tr>
        <td>Island Trading</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Koniglich Essen</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Canada</td>
    </tr>
    <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Italy</td>
    </tr>
    <tr>
        <td>North/South</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Paris specialites</td>
        <td>France</td>
    </tr>
</table>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho phần tử input */
#myInput {
    width:100%;
    display:block;
    padding:12px 0;
    padding-left:32px;    
    border:1px solid #ccc;
    background-image:url('/images/searchicon.png');
    background-repeat:no-repeat;
    background-position:6px;
}
/* Tạo kiểu cho bảng */
#myTable {
    width:100%;
    text-align:left;
    margin-top:20px;
    border-collapse:collapse;
    border:1px solid #ddd;
    font-size:18px;
}
#myTable tr th {
    padding:10px;
    background-color:#555;
    color:white;
}
#myTable tr td {
    padding:10px;
    border-bottom:1px solid #ddd;    
}
/* Thêm hiệu ứng khi hover */
#myTable tr:hover:not(first-child) {
    background-color:orange;
    color:white;    
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>

// Khai báo các biến
var a, b, c, d, e, i, val;
a = document.getElementById('myInput');

// Gán sự kiện keyup cho phần tử input
a.onkeyup = function() {
    val = this.value;
    b = document.getElementById('myTable');
    c = b.getElementsByTagName("tr");
    for(i = 1; i < c.length; i++) {
        
        // Chọn tìm kiếm trên vùng "Name"
        d = c[i].getElementsByTagName("td")[0]; // Chọn số 1 nếu tìm kiếm trên vùng "country"
        e = d.textContent || d.innerText;
        if(e.toUpperCase().indexOf(val.toUpperCase()) > -1) {
            c[i].style.display = "";
        }else{
            c[i].style.display = "none";    
        }
    }    
}
</script>

Xem kết quả