Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
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.
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 |
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>