使用JavaScript根据表格Bonus列文本为行添加对应Bootstrap背景类

你可以直接在拼接表格行标签时判断Bonus等级，给<tr>加上对应的类名即可，同时你原有代码中存在行闭合标签笔误，将末尾的<tr>修正为</tr>即可正常运行。

修改后的buildTable函数代码如下：

function buildTable() 
{
    let outputText = '';    

    for (var i = 0; i < storeData.length; i++) 
    {
        let store = storeData[i];
        // 获取当前行Bonus等级
        let bonusLevel = findBonus(store.sales);
        // 匹配对应行样式类
        let rowClass = '';
        if(bonusLevel === 'Level 1') rowClass = 'bg-info';
        if(bonusLevel === 'Level 2') rowClass = 'bg-warning';

        outputText += `<tr class="${rowClass}">`;
        outputText += "<td>" + store.city + "</td>";
        outputText += "<td>" + store.postcode + "</td>";
        outputText += "<td>" + findState(store.postcode) + "</td>";
        outputText += "<td>" + store.manager + "</td>";
        outputText += "<td>" + store.sales + "</td>";
        outputText += "<td>" + bonusLevel + "</td>";
        // 修正闭合标签笔误
        outputText += "</tr>";
    }

    document.getElementById("tableBody").innerHTML = outputText;
}

如果需要在表格渲染完成后再动态修改行样式，可使用如下代码遍历实现：

// 在buildTable()执行后调用
document.querySelectorAll('#tableBody tr').forEach(row => {
    const bonusVal = row.children[5].textContent.trim();
    if(bonusVal === 'Level 1') row.classList.add('bg-info');
    if(bonusVal === 'Level 2') row.classList.add('bg-warning');
})

内容的提问来源于stack exchange，提问作者Koshila Dodantenna