bootstraptable动态修改行/列的背景颜色或字体颜色

最新推荐文章于 2024-01-08 10:05:55 发布

Odinpeng

最新推荐文章于 2024-01-08 10:05:55 发布

阅读量5.3k

点赞数 2

文章标签： javascript bootstrap jquery html

本文链接：https://blog.csdn.net/odinpeng/article/details/131920477

版权

文章介绍了如何在代码中动态修改表格的行和列样式，包括设置行的背景颜色和字体颜色，以及单元格的背景颜色和字体颜色。提供了具体的函数示例，如`rowStyle`和`cellStyle`，并展示了一个使用示例，展示了根据数据条件改变行的字体颜色的逻辑。

摘要由CSDN通过智能技术生成

修改行的背景颜色

 // 动态修改行的背景颜色
rowStyle: function (row, index) { //row：行对象， index ：第几行
    // 逻辑
    return {css: {"background-color": 'rgb(0,0,0)'}}; 
}

修改行字体的颜色

 // 动态修改行的背景颜色
rowStyle: function (row, index) { //row：行对象， index ：第几行
    // 逻辑
    return {css: {"color": 'rgb(0,0,0)'}}; 
}

修改列的背景颜色

cellStyle:function(value,row,index){// value：单元格值，row：行对象，index：第几行
	// 逻辑            
	return {css: {"background-color": 'rgb(0,0,0)'}};    
}

修改列字体的颜色

cellStyle:function(value,row,index){// value：单元格值，row：行对象，index：第几行
	// 逻辑            
	return {css: {"color": 'rgb(0,0,0)'}};    
}

使用示例

var custom = {
    clickToSelect: true,
    rowStyle: function (row, index) {    // 动态修改行的颜色
        if (row.zjzt == '2') {    // 如果证件状态值为2设置本行字体颜色为红色
            return {css: {"color": 'rgb(253,0,0)'}};
        }
        return '';
    },
    columns: [{
        checkbox: true
    }, {
        field: 'zjzt',
        title: '证件状态',
        formatter: function (value, row, index) {
        	if(row.zjzt != ''){
        		return row.zjzt;
        	}
        }
    }
}