Bài 20: Tạo bảng có tính năng tìm kiếm với jQuery

0

Trong bài học này, chúng ta sẽ tìm hiểu cách tạo bảng có tính năng tìm kiếm với jQuery. Mình sẽ tham khảo cách làm trên trang w3school nhé.

Video – Tạo bảng có tính năng tìm kiếm với jQuery

Ý tưởng

+ Lấy giá trị từ ô tìm kiếm. Dùng hàm on keyup để bắt sự kiện nhấn nút trên bàn phím khi nhập liệu vào input.

+ Lọc giá trị của từng hàng trong bảng. Hàng nào có giá trị trùng sẽ hiển thị.

+ Mình dùng một số code trong bài viết Search and Filter table của w3scool. Trong bài đó, họ hướng dẫn bằng code javascript thuần, mình code giữ nguyên html và css, sửa lại thành jquery thay cho js thuần.

Hướng dẫn chi tiết

Phần HTML

Mình dùng html của w3scoohl. Bạn có thể thêm lưới Bootstrap để căn chỉnh nhanh, đưa bảng vào giữa nhé.

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table class="myTable">
   <tr class="header">
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
   </tr>
   <tbody id="myTable">
   <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>
   </tbody>
</table>

Phần CSS

#myInput {
   background-image: url('/css/searchicon.png'); /* Add a search icon to input */
   background-position: 10px 12px; /* Position the search icon */
   background-repeat: no-repeat; /* Do not repeat the icon image */
   width: 100%; /* Full-width */
   font-size: 16px; /* Increase font-size */
   padding: 12px 20px 12px 40px; /* Add some padding */
   border: 1px solid #ddd; /* Add a grey border */
   margin-bottom: 12px; /* Add some space below the input */
}
.myTable {
   border-collapse: collapse; /* Collapse borders */
   width: 100%; /* Full-width */
   border: 1px solid #ddd; /* Add a grey border */
   font-size: 18px; /* Increase font-size */
}
.myTable th, #myTable td {
   text-align: left; /* Left-align text */
   padding: 12px; /* Add padding */
}
.myTable tr {
   /* Add a bottom border to all table rows */
   border-bottom: 1px solid #ddd;
}
.myTable tr.header, #myTable tr:hover {
   /* Add a grey background color to the table header and on hover */
   background-color: #f1f1f1;
}

Phần JS

$(document).ready(function() {
   $('#myInput').on('keyup', function(event) {
      event.preventDefault();
      /* Act on the event */
      var tukhoa = $(this).val().toLowerCase();
      $('#myTable tr').filter(function() {
         $(this).toggle($(this).text().toLowerCase().indexOf(tukhoa)>-1);
      });
   });
});

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.