如何根据表格Bonus列值动态为<tr>添加bg-*背景类实现行变色

AI 小北

2026-10-5

问题原因

你的代码存在两处核心问题导致类无法正常生效：

基础语法错误：循环生成表格行时，结束标签写为了<tr>而非</tr>，导致行元素渲染异常，类属性无法正常绑定
逻辑缺失：没有在生成<tr>标签时，根据Bonus等级动态拼接对应的class属性

修复后的完整`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';
        } else if(bonusLevel === 'Level 2') {
            rowClass = 'bg-warning';
        }
        // 给tr元素绑定class
        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;
    return;
}