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 text và đặt thành phần đó hiển thị dưới dạng HTML

.table-row.selected {
background-color: blue!important;
  color:white;
}

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. tr:hover { background: yellow; } làm tốt ở đó. Nhưng đánh dấu các cột luôn phức tạp hơn một chút, bởi vì không có một phần tử HTML nào là cha của các ô bảng trong một cột. Một chút JavaScript có thể xử lý dễ dàng, nhưng Andrew Howe gần đây đã gửi email cho tôi để chia sẻ một thủ thuật nhỏ mà anh ấy tìm thấy trên StackOverflow, được đăng bởi Matt Walton

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 s, hidden by the table overflow

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ố đó

table {
  overflow: hidden;
}

tr:hover {
  background-color: #ffa;
}

td, th {
  position: relative;
}
td:hover::after,
th:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

Phủ định z-index giữ nó bên dưới nội dung. Phủ định z-index là một thủ thuật thú vị, nhưng hãy lưu ý rằng bảng này không thể được lồng trong các phần tử khác có nền, nếu không phần tô sáng sẽ nằm bên dưới chúng

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 ứng

Cá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

// Whatever kind of mobile test you wanna do.
if [screen.width < 500] {
  
  // :hover will trigger also once the cells are focusable
  // you can use this class to separate things
  $["body"].addClass["nohover"];

  // Make all the cells focusable
  $["td, th"]
    .attr["tabindex", "1"]
    // When they are tapped, focus them
    .on["touchstart", function[] {
      $[this].focus[];
    }];
  
}

Sau đó, trong CSS bạn thêm. tập trung phong cách là tốt

td:focus::after,
th:focus::after { 
  content: '';  
  background-color: lightblue;
  position: absolute;  
  left: 0;
  height: 10000px;
  top: -5000px;
  width: 100%;
  z-index: -1;
}

td:focus::before {
  background-color: lightblue;
  content: '';  
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;  
  width: 10000px;
  z-index: -1;
}

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 và tiêu đề bảng trong chỉ các hàng được chọn của