首页 > 解决方案 > 格式化单元格文本颜色

问题描述

此列格式化程序可以很好地设置背景颜色,但是我根本看不到文本。

function truthFormatter(cell, formatterParams, onRendered) {
    var cellValue = cell.getValue();
    var cellElement = cell.getElement();
    if (cellValue == "T") {
    cellElement.style.backgroundColor = "#0000B3";
    cellElement.style.color = "#FFFFFF";
    }
    else if (cellValue == "F") {
    cellElement.style.backgroundColor = "#B30000";
    cellElement.style.color = "#FFFFFF";
    }
}

Chrome 在其中一个单元格上的样式检查器表明一切都应该没问题:

element.style {
    width: 40px;
    text-align: center;
    background-color: rgb(0, 0, 179);
    color: rgb(255, 255, 255);
    height: 25px;
}

我在独立的测试配置中得到了相同的行为——没有应用其他 CSS。

此外,不应应用格式化程序的单元格中的文本不可见——尽管此处的样式检查似乎也很好:

element.style {
    width: 151px;
    text-align: right;
    color: rgb(0, 0, 0);
    height: 32px;
}

链接到呈现的表格屏幕截图

链接到没有格式化程序的渲染

标签: javascripttabulator

解决方案


您的线路:

cellElement.style.color = "#FFFFFF";

应该可以正常工作,我已经运行了一些测试,并且可以正常工作。

我建议使用您的浏览器检查器来查看覆盖它的 CSS。

您也没有在格式化程序中返回单元格的值,因此单元格内不会显示任何内容。

您需要将此行添加到格式化程序函数的底部

return cell.getValue();

推荐阅读