基于单元格值的 HTML/jquery 表格单元格的格式颜色答案

【问题标题】：Format color for HTML/jquery table cells based on the cell value基于单元格值的 HTML/jquery 表格单元格的格式颜色
【发布时间】：2017-02-21 21:39:06
【问题描述】：

我有以下 HTML，它使用 jquery 从 csv 文件中提取数据并将其显示在表格中。我正在尝试对结果表进行一些条件格式化。我希望将值低于 2.5 的任何单元格设置为绿色背景。 2.5 到 3 之间的值应该是黄色的。 3 到 100 之间的任何值都应该是红色的。我尝试了网站上提供的许多不同的解决方案，但到目前为止都没有奏效。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inspection</title>
<link rel="stylesheet" href="mystyles.css" />
<meta http-equiv="refresh" content="120">


</head>
<body>

<script src="jquery.min.js"></script>
<script>
function opsi(data){
    var allRows = data.split(/\r?\n|\r/);
    var table = "<table id='scrapT'>";
    for(var singleRow=0;singleRow<allRows.length;singleRow++){
        if(singleRow === 0){
            table += "<thead>";
            table += "<tr>";
        } else{
            table += "<tr>";
        }
        var rowCells = allRows[singleRow].split(',');
        for(var rowSingleCell=0;rowSingleCell<rowCells.length;rowSingleCell++){
            if(singleRow === 0){
                table += "<th>";
                table += rowCells[rowSingleCell];
                table += "</th>";
            } else{
                table += "<td>";
                table += rowCells[rowSingleCell];
                table += "</td>";
            }
        }
        if(singleRow === 0){
            table += "</tr>";
            table += "</thead>";
            table += "<tbody>";
        } else{
            table += "</tr>";
        }
    }
    table += "</tbody";
    table += "</table>";
    $("body").append(table);
}

$.ajax({
    url: "file.csv",
    dataType: "text"
}).done(opsi);

</script>

【问题讨论】：

标签： jquery html css

【解决方案1】：

这是一个很好的链接，有一个可以参考的例子。

Changing background cell of table depending on value

【讨论】：

我正在查看 Ronald 的链接。在过去的几天里没有太多时间来处理这个问题。
太棒了。如果可以，请发布解决方案，很乐意提供帮助。
所以这在一定程度上有效，但并不完全符合我的需要。它适用于所有带有数字的“td”。我的表中有 4 列包含数字。我只需要更改第 4 列和第 5 列的颜色。不同的规则适用于每一列。对于第 4 列，我需要任何低于 3 的内容为绿色，任何高于 3 的内容为红色。对于第 5 列，我需要任何低于 90 的值都为红色，高于 90 的值为绿色。
我创建了一个 JSFiddle 来展示我想要的东西：jsfiddle.net/adleveritt/1vxm7ukg 它在 JSFiddle 中完美运行。由于某种原因，它不适用于我上面的代码。我将 javascript 作为 script.js 保存到根目录，然后将此放在我的 html 的 head 部分。