Làm nổi bật các hàng trong các bảng HTML khi nhấp vào

Khi bạn tạo các trang Web bằng HTML, bạn có thể sử dụng các hàm JavaScript để thay đổi sự xuất hiện của các thành phần trang trên sự tương tác của người dùng. Để tô sáng các hàng nhất định trong một bảng, bạn có thể đặt khai báo Cascading Style Sheet cho các hàng này ở trạng thái bình thường và ở trạng thái được tô sáng. Bằng cách thêm thuộc tính người nghe sự kiện vào các thành phần hàng, trang của bạn có thể gọi hàm JavaScript để thực thi onclicks, thay đổi động các thuộc tính tên lớp của thành phần và sau đó thay đổi diện mạo của chúng.

Tạo bảng HTML của bạn. Thêm mã đánh dấu mẫu sau vào tệp trang Web của bạn:

1	2	3
4	5	6

Bảng này chứa hai hàng mỗi hàng với ba cột. Mỗi ô có một số để trình diễn, nhưng bạn có thể bao gồm bất kỳ nội dung nào bạn thích trong trang của riêng bạn.

Thêm một phần cho CSS trong phần đầu của trang của bạn. Giữa các thẻ đầu mở và đóng trong tệp của bạn, hãy thêm phác thảo mã CSS sau:

Mã này đặt các hàng của bảng có nền trắng theo mặc định, với nền đỏ khi người dùng nhấp vào chúng. Bạn có thể thay đổi các cài đặt này để phản ánh phong cách của trang của riêng bạn. Khi người dùng lần đầu xem trang, các cài đặt CSS bình thường sẽ được áp dụng, như được chỉ định bởi các thuộc tính lớp hàng của bảng trong mã HTML gốc.

Thêm một phần cho JavaScript trong phần đầu trang của bạn. Giữa các thẻ đầu mở và đóng trong tệp của bạn, hãy thêm đoạn mã sau:

Điều này tạo ra một phần kịch bản và một phác thảo chức năng. Trình duyệt sẽ gọi hàm này khi người dùng nhấp vào bất kỳ hàng nào trong bảng của bạn, chuyển giá trị thuộc tính ID của hàng được nhấp để tập lệnh có thể xác định nó.

Thay đổi tên lớp của các thành phần hàng trong bảng của bạn. Khi hàm thực thi, điều này có nghĩa là người dùng đã nhấp vào một phần tử hàng. Thêm mã sau vào bên trong hàm JavaScript của bạn, có được tham chiếu đến phần tử hàng của bảng trong trang: var row = document.getEuityById (rowID);

Thêm dòng sau để có được một bản sao chuỗi của tên lớp hiện tại của phần tử hàng trong bảng của bạn: var current = row. ClassName;

Thêm một câu lệnh có điều kiện phù hợp với sự xuất hiện của hàng trong bảng của bạn: if (current.indexOf ("normal")> = 0) row.groupName = "highlight"; other row.groupName = "normal";

Nếu hàng bảng của bạn hiện được đặt là bình thường, chức năng sẽ thay đổi nó để có trạng thái tô sáng. Nếu nó hiện được tô sáng, chức năng sẽ thay đổi nó trở lại bình thường. Điều này sẽ tạo hiệu ứng chuyển đổi, với trạng thái tô sáng xen kẽ mỗi khi người dùng nhấp vào hàng.

Lưu tệp của bạn và mở trang trong chương trình trình duyệt Web. Kiểm tra trang bằng cách nhấp liên tục vào các hàng. Bạn sẽ thấy màu nền thay đổi mỗi lần bạn nhấp vào một hàng. Nếu trang không tô sáng các hàng khi nhấp, hãy kiểm tra mã của bạn và mở lại. Tăng cường mã để cung cấp mức độ nổi bật và trình bày mà bạn muốn trang web của bạn có.