JavaScript表格单元格条件高亮逻辑修正技术问询

需求：为id为table1的表格指定单元格（从第3行第5列开始）根据百分比数值设置背景色，规则如下：

• 数值 ≥90%：背景色绿色
• 80% ≤ 数值 ≤89%：背景色黄色
• 数值 <80%：背景色红色

现有两段代码均无法实现预期效果，原代码如下：

错误代码示例1 #

function myFunction12(){
    var table1 = document.getElementById("table1").rows; 
    var y31;
    for(var i = 2; i < table1.length; i++) {
        for(var j = 4; j < 5; j++) {
            y31 = table1[i].cells;
            if((y31[j].innerText)>="79 %") {
                y31[j].style.backgroundColor ="red";
            } else if(((y31[j].innerText)>="80 %") && ((y31[j].innerText)<="89 %")) {
                y31[j].style.backgroundColor ="YELLOW";
            } else if((y31[j].innerText)>="90 %") {
                y31[j].style.backgroundColor ="GREEN";
            }
        }
    }
}

错误代码示例2 #

function myFunction12(){
    var table1 = document.getElementById("table1").rows; 
    var y31;
    for(var i = 2; i < table1.length; i++) {
        for(var j = 4; j < 5; j++) {
            y31 = table1[i].cells;
            if((y31[j].innerText)>="79 %") {
                y31[j].style.backgroundColor ="red";
            } else if(((y31[j].innerText)>="80 %") && ((y31[j].innerText)<="89 %")) {
            y31[j].style.backgroundColor ="YELLOW";
        } else if((y31[j].innerText)>="90 %") {
            y31[j].style.backgroundColor ="GREEN";}
        }
    } 
}

原代码问题分析 #

• 字符串比较逻辑错误：直接对带百分号的文本字符串做大小判断（比如"90 %" >= "79 %"），是按字符编码顺序比较，并非数值比较，结果完全不可靠
• 条件顺序错误：第一个条件>= "79 %"会匹配所有大于等于79%的数值，包括80%、90%以上的情况，导致后面的黄色、绿色条件永远无法触发

修正后的代码 #

function myFunction12() {
    const table = document.getElementById("table1");
    // 从第3行开始遍历（索引为2）
    for (let i = 2; i < table.rows.length; i++) {
        const row = table.rows[i];
        // 定位第5列单元格（索引为4）
        const cell = row.cells[4];
        // 提取单元格内的百分比数值：移除百分号后转成数字
        const percentage = parseFloat(cell.innerText.replace(/%/g, ''));
        
        // 按从高到低的顺序判断条件，避免逻辑覆盖
        if (percentage >= 90) {
            cell.style.backgroundColor = "green";
        } else if (percentage >= 80 && percentage <= 89) {
            cell.style.backgroundColor = "yellow";
        } else if (percentage < 80) {
            cell.style.backgroundColor = "red";
        }
    }
}

修正说明 #

1. 数值提取：通过replace(/%/g, '')移除文本中的百分号，再用parseFloat转换为数字，确保是基于数值的大小比较
2. 条件顺序调整：优先判断最高阈值（≥90%），再判断中间区间，最后处理最低区间，避免高数值被低优先级条件拦截
3. 代码简化：优化变量命名，减少不必要的嵌套，提升代码可读性

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