Tự động thay đổi màu nền bằng JavaScript

Sử dụng JavaScript, bạn có thể tự động thay đổi màu nền của mục trang kết quả dựa trên dữ liệu trong bản ghi được tham chiếu. Điều này có thể hữu ích để làm nổi bật các bản ghi yêu cầu hành động ngay lập tức. Bài viết này trình bày các phương pháp thay đổi màu của cả báo cáo thư viện/danh sách và báo cáo dạng bảng

Tự động thay đổi màu nền bằng JavaScript

Các bước đặt màu nền cho hàng (bản ghi) trong báo cáo dạng bảng

điều kiện tiên quyết.                                                                               

Để hoạt động chính xác, bảng nguồn của bạn phải có một trường duy nhất, chẳng hạn như Số tự động. Có thể thêm trường AutoNumber bất kỳ lúc nào trong dạng xem Thiết kế của bảng. JavaScript có trong bài viết này sử dụng trường Có/Không để xác định màu nền của bản ghi

  1. Chọn Trang dữ liệu bạn muốn cập nhật cho trường hợp này và nhấp vào Chỉnh sửa để mở trình hướng dẫn Trang dữ liệu
  2. Tiếp tục với màn hình Cấu hình Trường Trang Kết quả
  3. Tạo một cột giữ chỗ. Xin lưu ý rằng phương pháp này sẽ làm cho một trong các cột của bạn không thể sắp xếp được. Chọn một cột không được sử dụng để sắp xếp trang kết quả của bạn và sử dụng nút xóa để xóa cột đó khỏi bảng thành phần DataPage
  4. Sử dụng nút Chèn ở góc dưới bên phải của bảng thành phần DataPage để thêm một khối HTML
  5. Trong tab Nâng cao, tắt trình chỉnh sửa HTML
  6. Sử dụng nút Chèn của khối HTML ở góc dưới bên phải, chèn tham số cho cột bạn đã xóa ở bước một
  7. Viết tên tham số (hoặc nhãn thích hợp) vào trường nhãn phía trên bảng điều khiển khối HTML
  8. Thêm JavaScript thay đổi màu hàng. Để làm điều đó, hãy thêm thẻ liên kết và JavaScript để thay đổi nền của hàng trong khối HTML.
    1. Tạo thẻ neo HTML và đặt giá trị id của nó thành “visi”, ngay sau đó là trường duy nhất (e. g. AutoNumber) tham số. Ví dụ.
    2. Dán JavaScript sau thẻ liên kết này. Đảm bảo rằng JavaScript được bao quanh bởi các thẻ script
    3. Thay thế [@Yes/No FieldName]bằng tham số trường Có/Không từ bảng của bạn. Đảm bảo tham số được bao quanh bởi dấu nháy đơn
    4. Thay đổi màu sắc trong JavaScript để phù hợp với Phong cách/trang web của bạn

Tự động thay đổi màu nền bằng JavaScript

Kỹ thuật này yêu cầu DataPage Style của bạn không kích hoạt Hovered Rows. Các hàng được di chuột sẽ thay đổi màu nền trở lại mặc định nếu người dùng cuối di chuột qua hàng. Bạn có thể tắt Hovered Rows trong phần Table Layout của Style wizard

Tự động thay đổi màu nền bằng JavaScript

Ghi chú. Giải pháp này không hoạt động khi tùy chọn DataPage trong cột không phản hồi và đóng băng được bật

Các bước để tự động thiết lập màu nền của bản ghi báo cáo danh sách/thư viện

Nền báo cáo danh sách/thư viện được thay đổi theo cách tương tự như báo cáo dạng bảng. Trong báo cáo danh sách/thư viện, bạn có thể

    • Áp dụng màu nền cho các bản ghi dựa trên điều kiện
    • Thay thế liên kết thông tin và chi tiết bản ghi bằng một hình ảnh cho biết bản ghi không còn nữa

  1. Tiếp tục với màn hình Cấu hình Trường Trang Kết quả
  2. Sử dụng nút Chèn ở góc dưới bên phải của bảng thành phần DataPage, chèn hai khối HTML
  3. Sử dụng các nút mũi tên, định vị các khối HTML ở đầu và cuối danh sách phần tử DataPage
  4. Trong tab Nâng cao, tắt trình chỉnh sửa HTML cho cả hai khối HTML
  5. Nếu Trang dữ liệu không phản hồi và bạn cần áp dụng màu nền
    1. Trong khối HTML đầu tiên. thêm đoạn mã sau và thay thế [@field. ID] với tên trường Số tự động của bạn
    2. Trong khối HTML thứ hai, thêm đoạn mã sau
    3. Thay thế các phần tương ứng của mã

Tự động thay đổi màu nền bằng JavaScript

  1. Nếu DataPage phản hồi và bạn cần áp dụng màu nền
    1. Trong khối HTML đầu tiên, hãy thêm đoạn mã sau và thay thế [@field. ID] với tên trường Số tự động của bạn
    2. Trong khối HTML thứ hai, thêm đoạn mã sau
    3. Thay thế các phần tương ứng của mã như được hiển thị trên ảnh chụp màn hình sau

Tự động thay đổi màu nền bằng JavaScript

  1. Nếu Trang dữ liệu không phản hồi và bạn cần áp dụng hình nền
    1. Trong khối HTML đầu tiên, hãy thêm đoạn mã sau và thay thế [@field. ID] với tên trường Số tự động của bạn
    2. Trong khối HTML thứ hai, thêm đoạn mã sau
    3. Thay thế các phần tương ứng của mã

Tự động thay đổi màu nền bằng JavaScript

  1. Nếu DataPage phản hồi và bạn cần áp dụng hình nền
    1. Trong khối HTML đầu tiên, hãy thêm đoạn mã sau và thay thế [@field. ID] với tên trường Số tự động của bạn
    2. Trong khối HTML thứ hai, thêm đoạn mã sau
    3. Thay thế các phần tương ứng của mã như được hiển thị trên ảnh chụp màn hình sau.  

Tự động thay đổi màu nền bằng JavaScript

  1. Nhấp vào Kết thúc

Các bước đặt chiều cao chuẩn cho hàng báo cáo

Bạn có thể đặt chiều cao cố định cho các hàng của bảng. Bằng cách này, nếu tất cả các bản ghi trong một hàng có dữ liệu ẩn, thì hàng đó sẽ vẫn có chiều cao tiêu chuẩn

  1. Mở trình hướng dẫn Kiểu bằng cách chọn Kiểu DataPage của bạn và nhấn nút Chỉnh sửa
  2. Trong màn hình Cài đặt kiểu, nhấp vào tab Nguồn
  3. Trong bảng thành phần DataPage, nhấp vào Trang kết quả và chọn phần Bố cục danh sách/lưới
  4. Thêm chiều cao cố định vào lớp cbResultSetListViewRow như trong hình sau

Tự động thay đổi màu nền bằng JavaScript

Ghi chú. Bài viết này sử dụng các giải pháp HTML, JavaScript hoặc bên thứ ba bên ngoài để thêm chức năng bên ngoài bộ tính năng tiêu chuẩn của Caspio. Các giải pháp này được cung cấp "nguyên trạng" mà không có bảo hành, hỗ trợ hoặc bảo đảm. Mã trong bài viết này được cung cấp dưới dạng mẫu để hỗ trợ bạn tùy chỉnh các ứng dụng web của mình. Bạn có thể cần hiểu biết cơ bản về HTML và JavaScript để triển khai thành công

Làm cách nào để thay đổi màu nền div một cách linh hoạt bằng JavaScript?

JavaScript – Thay đổi màu nền của Div . get reference to the element, and assign required color value to the element. kiểu. Thuộc tính màu nền.

Làm cách nào để thay đổi màu nền trong hàm JavaScript?

Để thay đổi màu nền bằng javascript, bạn có thể áp dụng kiểu. nền hoặc phong cách. màu nền của thành phần bạn muốn thay đổi nền cho . Ví dụ dưới đây thay đổi màu nền của phần thân khi bạn nhấp vào một phần tử bằng cách sử dụng kiểu.

Làm cách nào để thay đổi màu văn bản trong JavaScript động?

forEach((elem, i) => { // Thay đổi thuộc tính style để làm sáng màu chữ. Phong cách. màu = '#666'; . addEventListener('change',function(e){ // Thay đổi thuộc tính style để làm tối phần tử màu văn bản

Làm cách nào để thay đổi màu nền động trong jquery?

Để đặt màu nền, chúng tôi sử dụng phương thức css() . Phương pháp này giúp chúng tôi thêm động các thuộc tính CSS. cú pháp. $("tên thẻ").