Bảng html đánh dấu hàng đã chọn
Trên hình ảnh của Bảng, khi một hàng được chọn bằng cách nhấp vào hàng đó, tất cả các hàng khác trong bảng sẽ bị mờ đi Xem bên dưới Câu hỏi. có thể tùy chỉnh cách định dạng các hàng đã chọn và không được chọn không? Ví dụ: tôi muốn hàng A ở trên được tô sáng bằng nền xanh lam nhạt khi được chọn và các hàng B và C giữ nguyên định dạng mặc định - nghĩa là không bị mờ Tôi không hỏi về định dạng trường. Tôi biết rằng tôi có thể đánh dấu cụ thể một hàng bằng trường và/hoặc định dạng có điều kiện, nhưng điều đó không cho phép tôi thay đổi định dạng dựa trên những gì được chọn trên cùng bảng đó, như tôi đã mô tả ở trên Tôi đã đưa ra ý tưởng có một bộ cắt riêng để kiểm soát lựa chọn, nhưng người dùng của tôi thích phương pháp hiện tại hơn trường hợp sử dụng của tôi là như sau. có một báo cáo trong đó các sản phẩm được phân tích từng cái một. Tất cả các sản phẩm xuất hiện dưới dạng Bảng trực quan, được sắp xếp theo một số giá trị liên quan đến sản phẩm đó. Tất cả các hình ảnh khác trên trang được lưu chéo bởi hình ảnh bảng này. Vì vậy, trải nghiệm người dùng khi sử dụng báo cáo này là nhấp vào một sản phẩm trong hình ảnh bảng sản phẩm (lọc chéo phần còn lại của trang), thực hiện phân tích và đưa ra quyết định, sau đó nhấp vào sản phẩm tiếp theo và lặp lại. Bộ cắt không phù hợp cho việc này vì bộ cắt sẽ chỉ hiển thị một chiều và không có cột giá trị Chúng ta hoàn toàn nên làm việc trên một số tùy chọn trợ năng được tích hợp sẵn vì nhu cầu của mọi người có thể khác nhau đối với các vấn đề như thế này. Ngay bây giờ, tôi có thể cung cấp cho bạn các bản sửa lỗi này bằng CSS Trong một ứng dụng, nếu bạn thêm văn bản này vào thành phần
Bạn sẽ nhận được kết quả này trên tất cả các hàng đã chọn trong bảng của mình hình ảnh3550×892 210 KB Bạn cũng có thể áp dụng toàn bộ tổ chức đó trong CSS được tải sẵn như thế này (không có thẻ kiểu) hình ảnh2052×1530 129 KB Để áp dụng các cài đặt này trên toàn cầu cho tất cả các ứng dụng trang bị lại của bạn. Màu nền và kiểu màu sẽ hoạt động với bất kỳ màu nào trong số này hoặc bất kỳ mã hex nào nên tính linh hoạt khá rộng Ở cấp độ cao, tất cả các thành phần đều có tên lớp bắt đầu bằng _retool-componentname, như _retool-textinput. Có một chút hướng dẫn ở đây, nhưng thành thật mà nói, tài nguyên tốt nhất là các công cụ dành cho nhà phát triển trình duyệt của bạn vì bộ chọn cụ thể mà bạn cần có thể khá lồng nhau. Tất cả điều này dựa trên bộ chọn CSS và tôi không phải là chuyên gia về chủ đề này, nhưng đây là sơ lược về cách tôi tìm kiếm điều này Quy trình công việc này dành riêng cho chrome, nhưng tất cả các trình duyệt chính sẽ hỗ trợ một cái gì đó tương tự. Chúng ta có thể bắt đầu bằng cách nhấp chuột phải vào khu vực của trang mà tôi muốn tìm bộ chọn và chọn kiểm tra hình ảnh1344×800 112 KB Thao tác đó sẽ hiển thị phần Thành phần công cụ chrome dev với lớp cụ thể mà con chuột đã được mở rộng ở trên hình ảnh2510×1672 407 KB Ở đây chúng ta có thể thấy rằng bên trong lớp _ retool-table 1, có nhiều lớp lồng nhau đi xuống ô cụ thể mà ban đầu tôi đã nhấp chuột phải vào để kiểm tra. Khi chúng tôi di chuột qua các mục khác nhau trong chế độ xem này, nó sẽ đánh dấu các phần tử phù hợp trên trang hình ảnh2660×1414 364 KB Các hàng của bảng cho tất cả các thành phần của bảng đều thuộc lớp rt-tr, vì vậy việc tạo kiểu. rt-tr sẽ ảnh hưởng đến mọi hàng ở bất kỳ đâu trong ứng dụng (hoặc mọi nơi nếu được sử dụng trong css tải sẵn) Đánh dấu các hàng của bảng khá dễ dàng trong CSS. Nó đã được vài năm tuổi, vì vậy tôi nghĩ rằng tôi chỉ cần làm sạch nó và đăng nó ở đây The trick is using huge pseudo elements on the Bạn không thực sự biết bảng lớn như thế nào từ CSS, vì vậy chỉ cần làm cho các phần tử giả siêu cao với giá trị trên cùng âm bằng một nửa số đó
Phủ định Bạn có thể thấy rằng trong hành động ở đây Xem phần Đánh dấu hàng và cột bằng bút chỉ bằng CSS của Chris Coyier (@chriscoyier) trên CodePen Làm cho nó hoạt động với cảm ứngCác lớp giả di chuột chỉ hoạt động trên các thiết bị cảm ứng. Đầu tiên, phần tử cần phải được đặt tiêu điểm, theo mặc định, các ô của bảng không được đặt. Bạn chắc chắn có thể thêm trình xử lý sự kiện nhấp chuột vào các ô của bảng và chỉ cần thực hiện mọi thứ bằng JavaScript, nhưng đây là một phương pháp để giữ hầu hết công việc trong CSS
Sau đó, trong CSS bạn thêm. tập trung phong cách là tốt
Trong bản trình diễn cuối cùng của mình, tôi đã hiểu rõ hơn một chút với bộ chọn CSS để đảm bảo rằng các ô bảng trống không kích hoạt bất kỳ thứ gì, tiêu đề bảng chỉ trong các cột được chọn của |