bootstrap table背景_bootstrapTable设置行样式(背景颜色)
时间: 2023-08-04 17:03:17 浏览: 161
bootstrap设置某列背景色和前景色
可以通过设置 rowStyle 属性来设置 Bootstrap Table 的行样式(包括背景颜色)。
示例代码如下:
```javascript
$('#table').bootstrapTable({
data: data,
rowStyle: function(row, index) {
if (row.score < 60) {
return {
classes: 'danger'
};
} else if (row.score >= 60 && row.score < 80) {
return {
classes: 'warning'
};
} else {
return {
classes: 'success'
};
}
}
});
```
在这个示例中,根据每一行数据的 score 值来设置行的样式。如果 score 小于 60,则行的样式为 danger;如果 score 大于等于 60 且小于 80,则行的样式为 warning;否则,行的样式为 success。
在 HTML 中,可以定义这些样式类的样式:
```CSS
tr.danger {
background-color: #f2dede;
}
tr.warning {
background-color: #fcf8e3;
}
tr.success {
background-color: #dff0d8;
}
```
这样就可以根据数据的不同,为 Bootstrap Table 的行设置不同的背景颜色了。
阅读全文