JS表格列渲染求助：如何为两列应用相同颜色规则？

我是JavaScript新手，现有代码能成功给表格的'Assigned Mins'列根据数值设置背景色：值大于'0:19'时背景为红色，大于'0:09'时为橙色，否则为绿色。现在想把同样的规则应用到'Pending'列，但试了好几种条件判断写法都失败，要么没效果，要么所有列都变色，求正确实现方法。

原有可正常运行的代码 #

for(var i=0; i<columns.length; ++i) {
    if(columns[i].text == 'Assigned Mins') {
        columns[i].renderer = function (value, meta, rec) {
            if(value > '0:19') {
                meta.style = "background-color:red;font-weight:bold;color:white;";
            }
            else if(value > '0:09') {
                meta.style = "background-color:orange;font-weight:bold;color:white;";
            }
            else {
                meta.style = "background-color:green;font-weight:bold;color:white;";
            }
            return value;
        }
    }
}

尝试过的错误写法 #

• 错误写法1：

if(columns[i].text == 'Assigned Mins','Pending') {

• 错误写法2：

if(columns[i].text == 'Assigned Mins'||'Pending') {

• 错误写法3：

if (['Assigned Mins','Pending'].indexOf(columns[i]) > -1)

• 错误写法4：

if (~['Assigned Mins','Pending'].indexOf(columns[i]))

正确实现方法 #

步骤1：抽离复用的渲染函数 #

先把颜色渲染逻辑抽成独立函数，避免重复代码，也更易维护：

function timeColorRenderer(value, meta, rec) {
    if (value > '0:19') {
        meta.style = "background-color:red;font-weight:bold;color:white;";
    } else if (value > '0:09') {
        meta.style = "background-color:orange;font-weight:bold;color:white;";
    } else {
        meta.style = "background-color:green;font-weight:bold;color:white;";
    }
    return value;
}

步骤2：正确判断目标列 #

循环列时，检查当前列的text属性是否属于目标列列表，有两种简洁写法：

写法1：用逻辑或判断

for(var i = 0; i < columns.length; ++i) {
    // 明确判断当前列是两个目标列之一
    if (columns[i].text === 'Assigned Mins' || columns[i].text === 'Pending') {
        columns[i].renderer = timeColorRenderer;
    }
}

写法2：用数组includes方法（更适合多列场景）

// 定义目标列数组
const targetColumnNames = ['Assigned Mins', 'Pending'];

for(var i = 0; i < columns.length; ++i) {
    // 检查当前列名是否在目标数组中
    if (targetColumnNames.includes(columns[i].text)) {
        columns[i].renderer = timeColorRenderer;
    }
}

错误写法原因解析 #

• 错误写法1/2：JS语法逻辑错误。逗号运算符会返回最后一个值，||后直接写字符串会被判定为真值，导致条件永远为true，所有列都应用渲染规则。
• 错误写法3/4：indexOf传入的是整个列对象columns[i]，而不是列名columns[i].text，数组里存的是字符串，永远匹配失败，所以没有效果。

内容的提问来源于stack exchange，提问作者John Williams