programming bootstrap Scroll;> Table BootstrapTable responsiveTable Bootstrap w3schoolsTable Bootstrap 5Table bootstrap-VueDataTable Bootstrap

Hướng dẫn how do i change the color of a row in a bootstrap table? - làm cách nào để thay đổi màu của một hàng trong bảng bootstrap?

Tôi đang sử dụng bảng bootstrap. Nếu tôi đặt màu trong thuộc tính kiểu, nó sẽ bị xóa bởi bảng Bootstrap, vì vậy những gì tôi đã làm là tôi đã thêm một thuộc tính như "Data-RowColor" và sau đó sử dụng JavaScript để áp dụng màu:

$['td[data-rowcolor]'].attr["style", "background-color:yellow;"];

Vấn đề với phương pháp này là khi tôi sử dụng hộp tìm kiếm để lọc mọi thứ, màu sắc biến mất. Bất kỳ ý tưởng làm thế nào để có thể đặt màu mà không mất nó?

Có lẽ tôi nên đặt màu trong cuộc gọi lại onSearch nhưng tôi không chắc nó hoạt động như thế nào. Tôi đã nhìn thấy tài liệu.

hải ly

17.1k2 Huy hiệu vàng36 Huy hiệu bạc65 Huy hiệu Đồng2 gold badges36 silver badges65 bronze badges

Đã hỏi ngày 21 tháng 2 năm 2018 lúc 21:39Feb 21, 2018 at 21:39

1

Nếu bạn đang sử dụng bảng Bootstrap, tại sao không làm theo cách "Bảng Bootstrap"?

Phong cách hàng đặt theo cách này sẽ được duy trì khi sử dụng hộp tìm kiếm để lọc, v.v.

Sử dụng tùy chọn bảng rowStyle:

Hàm định dạng kiểu hàng, lấy hai tham số: ROW: Dữ liệu bản ghi hàng. Chỉ mục: Chỉ mục hàng. Hỗ trợ các lớp hoặc CSS. Ví dụ sử dụng:

function rowStyle[row, index] {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}

Kiểm tra jsfiddle ở đây.

Đã trả lời ngày 22 tháng 2 năm 2018 lúc 12:28Feb 22, 2018 at 12:28

DanieldanielDaniel

6386 Huy hiệu bạc18 Huy hiệu đồng6 silver badges18 bronze badges

0

Không chắc chắn 100% cách bạn xử lý tìm kiếm, nhưng rất có thể là cuộc gọi lại đang tải lại bảng bootstrap của bạn với kiểu dáng bootstrap ban đầu mà không có màu nền: thuộc tính màu vàng mà bạn đã thêm vào JavaScript.

Bạn có thể đặt lại thuộc tính kiểu thông qua JavaScript khi gửi,

$['#yourform'].on['submit', function [] {
    $['td[data-rowcolor]'].attr["style", "background-color:yellow;"];
}]

sẽ tạo kiểu cho bảng của bạn một lần nữa sau khi gửi đi qua và lưới được tải lại

HOẶC

Hãy thử thêm! Quan trọng vào phong cách CSS của bạn:

.td {
    background-color: yellow !important;
}

Kiểu dáng của bạn mà không có '! Quan trọng' rất có thể đang bị ghi đè bởi CSS của Bootstrap. Nhưng sử dụng! Quan trọng nên ưu tiên CSS của bạn hơn Bootstrap. Kiểu dáng vẫn nên ở đó ngay cả sau khi bạn tải lại lưới.

Đã trả lời ngày 21 tháng 2 năm 2018 lúc 21:48Feb 21, 2018 at 21:48

1

Trong bài viết này, chúng tôi sẽ thảo luận về việc thiết lập màu nền của các hàng bảng & cách đặt màu nền cho một ô riêng lẻ bằng bootstrap. Bootstrap cung cấp một loạt các lớp có thể được sử dụng để áp dụng các kiểu dáng khác nhau cho các bảng như thay đổi vẻ ngoài của tiêu đề, tạo ra các hàng bị tước, thêm hoặc loại bỏ biên giới, làm cho các hàng có thể lơ lửng, v.v. Bootstrap cũng cung cấp các lớp để làm cho bảng đáp ứng.

Mục đích của việc tạo bảng là hiển thị dữ liệu phức tạp và kích thước lớn theo định dạng có cấu trúc nhỏ gọn đơn giản cung cấp nội dung thông tin trong khi nhìn vào một cái nhìn thoáng qua. Điều này sẽ tiết kiệm thời gian để đọc và phân tích dữ liệu lớn không có cấu trúc. Bootstrap giúp tạo và trang trí nội dung theo cách tiêu chuẩn. Chúng tôi sẽ sử dụng các lớp tích hợp bootstrap để tạo cấu trúc bảng. Một bảng HTML đơn giản có thể được tạo bằng cú pháp dưới đây:

Syntax:

Table Contents...

Trước khi chúng tôi tiến hành thảo luận chính của mình, kiến ​​thức tạo bảng sử dụng HTML sẽ giúp bạn hiểu bài viết theo cách tốt hơn. Vui lòng tham khảo Bootstrap 4 | Bảng cho nhiều trường hợp khác của bảng trong bootstrap.

Liên kết CDN Bootstrap: Hãy để lấy một ví dụ để hiểu cách thiết lập và thêm liên kết CDN bootstrap để áp dụng các lớp được xác định trước bootstrap để tạo bảng.Let’s take an example to understand how to set up & add a Bootstrap CDN link to apply the bootstrap pre-defined classes for creating the table.




Example:

HTML

function rowStyle[row, index] {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}
0

function rowStyle[row, index] {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}
4

Bài Viết Liên Quan

Chủ Đề