Highlight Selected Row in HTML Table: Làm nổi bật hàng được chọn

Làm nổi bật hàng được chọn trong bảng HTML là một kỹ thuật phổ biến để cải thiện trải nghiệm người dùng. Nó giúp người dùng dễ dàng theo dõi hàng nào đang được thao tác, đặc biệt hữu ích trong các bảng dữ liệu lớn. Bài viết này sẽ hướng dẫn bạn cách Highlight Selected Row In Html Table bằng CSS và JavaScript, giúp bạn tạo ra những bảng tương tác và thân thiện hơn.

Các phương pháp Highlight Selected Row in HTML Table

Có nhiều cách để highlight selected row in html table. Dưới đây là một số phương pháp phổ biến và hiệu quả:

Sử dụng CSS: Đây là cách đơn giản nhất, sử dụng pseudo-class :hover để làm nổi bật hàng khi chuột di chuyển qua. Tuy nhiên, phương pháp này chỉ áp dụng khi rê chuột và không duy trì trạng thái được chọn.
Sử dụng JavaScript: JavaScript cung cấp khả năng kiểm soát tốt hơn, cho phép bạn duy trì trạng thái được chọn và áp dụng các hiệu ứng phức tạp hơn. Bạn có thể thêm một event listener để lắng nghe sự kiện click chuột và sau đó thêm/xóa class CSS để thay đổi kiểu dáng của hàng được chọn.
Kết hợp CSS và JavaScript: Đây là phương pháp tối ưu, kết hợp sự đơn giản của CSS với khả năng kiểm soát của JavaScript để tạo ra trải nghiệm người dùng tốt nhất.

Highlight Selected Row với CSS thuần

Cách đơn giản nhất là dùng CSS :hover:

tr:hover {
  background-color: lightblue;
}

Đoạn mã CSS này sẽ làm nổi bật hàng khi chuột di chuyển qua. Tuy nhiên, nó không lưu giữ trạng thái được chọn.

Highlight Selected Row với JavaScript

Để duy trì trạng thái được chọn, ta cần sử dụng JavaScript:

const table = document.getElementById('myTable');

table.addEventListener('click', (event) => {
  const selectedRow = event.target.closest('tr');

  if (selectedRow) {
    // Xóa highlight từ hàng đã chọn trước đó (nếu có)
    const previouslySelectedRow = table.querySelector('.selected');
    if (previouslySelectedRow) {
      previouslySelectedRow.classList.remove('selected');
    }

    // Thêm highlight cho hàng mới được chọn
    selectedRow.classList.add('selected');
  }
});

Và CSS tương ứng:

.selected {
  background-color: yellow;
}

Đoạn mã này sẽ thêm class selected vào hàng được click, làm nó nổi bật với nền vàng.

Ví dụ thực tế về Highlight Selected Row in HTML Table

Giả sử bạn có một bảng hiển thị danh sách cầu thủ. Khi người dùng click vào một hàng, hàng đó sẽ được highlight, cho biết cầu thủ đó đã được chọn.

<table>
  <thead>
    <tr>
      <th>Tên</th>
      <th>Vị trí</th>
      <th>Số áo</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="selectRow(this)">
      <td>Nguyễn Văn A</td>
      <td>Tiền đạo</td>
      <td>7</td>
    </tr>
    <tr onclick="selectRow(this)">
      <td>Trần Văn B</td>
      <td>Hậu vệ</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

<script>
function selectRow(row) {
  // ... (JavaScript code from previous example)
}
</script>

Kết luận

Highlight selected row in html table là một kỹ thuật đơn giản nhưng hiệu quả để cải thiện trải nghiệm người dùng. Bằng cách kết hợp CSS và JavaScript, bạn có thể tạo ra những bảng tương tác và dễ sử dụng hơn. Hy vọng bài viết này đã cung cấp cho bạn những kiến thức cần thiết để highlight selected row in html table.

FAQ

Làm thế nào để thay đổi màu highlight?
Có thể highlight nhiều hàng cùng lúc không?
Làm thế nào để highlight một cột cụ thể?
Tôi có thể sử dụng thư viện JavaScript nào để highlight hàng?
Làm thế nào để kết hợp highlight với các chức năng khác như sắp xếp và lọc?
Làm thế nào để highlight selected row in html table khi sử dụng framework như React hay Angular?
Có cách nào để tối ưu hiệu suất khi highlight hàng trong bảng lớn không?

Có thể bạn cũng quan tâm đến các bài viết sau: highlight when click on link javascript, highlight column table css, highlight selected row in kendo grid angularjs. Tìm hiểu thêm về highlight selected row angularjs và highlight selected row in table angularjs tại đây.

Khi cần hỗ trợ hãy liên hệ Số Điện Thoại: 0372999996, Email: [email protected] Hoặc đến địa chỉ: 236 Cầu Giấy, Hà Nội. Chúng tôi có đội ngũ chăm sóc khách hàng 24/7.