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>