如何对 JavaScript 数组的值应用条件格式？

Question

我有一个包含多个值的 JavaScript 数组，我正在尝试对其应用条件格式。

Example of what I am trying to produce.

let teamData = [
    { teamName: 'AFC Bournemouth', GW34FIX: "TOT(H)", GW34: 0.6, GW35FIX: "LEI(H)", GW35: 0.74, GW36FIX: "MCI(A)", GW36: 0.80, GW37FIX: "SOU(H)", GW37: 0.75, GW38FIX: "EVE(A)", GW38: 0.99, AVG: "", FDR: 0.69 },
    { teamName: 'Arsenal', GW34FIX: "LEI(H)", GW34: 1.20, GW35FIX: "TOT(A)", GW35: 1.11, GW36FIX: "LIV(H)", GW36: 0.98, GW37FIX: "AVL(A)", GW37: 1.44, GW38FIX: "WAT(H)", GW38: "Update", AVG: "", FDR: 0.69 },
    { teamName: 'Aston Villa', GW34FIX: "MUN(H)", GW34: 0.51, GW35FIX: "CRY(H)", GW35: 1.00, GW36FIX: "EVE(A)", GW36: 0.86, GW37FIX: "ARS(H)", GW37: 0.75, GW38FIX: "WHU(A)", GW38: "Update", AVG: "", FDR: 0.69 },
    { teamName: 'Brighton & Hove Albion', GW34FIX: "LIV(H)", GW34: 0.94, GW35FIX: "MCI(H)", GW35: 0.85, GW36FIX: "SOU(A)", GW36: 0.71, GW37FIX: "NEW(H)", GW37: 1.09, GW38FIX: "BUR(A)", AVG: "", FDR: 0.69 },
    { teamName: 'Burnley', GW34FIX: "WHU(A)", GW34: 1.26, GW35FIX: "LIV(A)", GW35: 1.01, GW36FIX: "WOL(H)", GW36: 1.22, GW37FIX: "NOR(A)", GW37: 2.37, GW38FIX: "BHA(H)", GW38: 1.46, AVG: "", FDR: 0.69 },
    { teamName: 'Chelsea', GW34FIX: "CRY(A)", GW34: 1.39, GW35FIX: "SHU(A)", GW35: 1.14, GW36FIX: "NOR(H)", GW36: 2.14, GW37FIX: "LIV(A)", GW37: 0.97, GW38FIX: "WOL(H)", GW38: 0.97, AVG: "", FDR: 0.69 },
    { teamName: 'Crystal Palace', GW34FIX: "CHE(H)", GW34: 0.72, GW35FIX: "AVL(A)", GW35: 1.00, GW36FIX: "MUN(H)", GW36: 0.42, GW37FIX: "WOL(A)", GW37: 0.56, GW38FIX: "TOT(H)", GW38: 0.49, AVG: "", FDR: 0.69 },
    { teamName: 'Everton', GW34FIX: "SOU(H)", GW34: 0.96, GW35FIX: "WOL(A)", GW35: 1.08, GW36FIX: "AVL(H)", GW36: 1.16, GW37FIX: "SHU(A)", GW37: 0.75, GW38FIX: "BOU(H)", GW38: 1.01, AVG: "", FDR: 0.69 },
    { teamName: 'Leicester City', GW34FIX: "ARS(A)", GW34: 0.83, GW35FIX: "BOU(A)", GW35: 1.35, GW36FIX: "SHU(H)", GW36: 0.72, GW37FIX: "TOT(A)", GW37: 0.88, GW38FIX: "MUN(H)", GW38: 0.81, AVG: "", FDR: 0.69 },
    { teamName: 'Liverpool', GW34FIX: "BHA(A)", GW34: 1.06, GW35FIX: "BUR(H)", GW35: 0.99, GW36FIX: "ARS(A)", GW36: 1.03, GW37FIX: "CHE(H)", GW37: 1.03, GW38FIX: "NEW(A)", GW38: 1.34, AVG: "", FDR: 0.69 },
    { teamName: 'Manchester City', GW34FIX: "NEW(H)", GW34: 0.83, GW35FIX: "BHA(A)", GW35: 1.17, GW36FIX: "BOU(H)", GW36: 1.25, GW37FIX: "WAT(A)", GW37: "Update", GW38FIX: "NOR(H)", GW38: 2.51, AVG: "", FDR: 0.69 },
    { teamName: 'Manchester United', GW34FIX: "AVL(A)", GW34: 1.96, GW35FIX: "SOU(H)", GW35: 1.10, GW36FIX: "CRY(A)", GW36: 2.36, GW37FIX: "WAT(A)", GW37: "Update", GW38FIX: "LEI(A)", GW38: 1.24, AVG: "", FDR: 0.69 },
    { teamName: 'Newcastle United', GW34FIX: "MCI(A)", GW34: 1.20, GW35FIX: "WAT(A)", GW35: 1.34, GW36FIX: "TOT(H)", GW36: 0.70, GW37FIX: "BHA(A)", GW37: 0.92, GW38FIX: "LIV(H)", GW38: 0.75, AVG: "", FDR: 0.69 },
    { teamName: 'Norwich City', GW34FIX: "WAT(A)", GW34: 0.84, GW35FIX: "WHU(H)", GW35: 0.54, GW36FIX: "CHE(A)", GW36: 0.47, GW37FIX: "BUR(H)", GW37: 0.42, GW38FIX: "MCI(A)", GW38: 0.40, AVG: "", FDR: 0.69 },
    { teamName: 'Sheffield United', GW34FIX: "WOL(H)", GW34: 0.90, GW35FIX: "CHE(H)", GW35: 0.87, GW36FIX: "LEI(A)", GW36: 1.39, GW37FIX: "EVE(H)", GW37: 1.34, GW38FIX: "SOU(A)", GW38: 1.02, AVG: "", FDR: 0.69 },
    { teamName: 'Southampton', GW34FIX: "EVE(A)", GW34: 1.04, GW35FIX: "MUN(A)", GW35: 0.91, GW36FIX: "BHA(H)", GW36: 1.41, GW37FIX: "BOU(A)", GW37: 1.33, GW38FIX: "SHU(H)", GW38: 0.98, AVG: "", FDR: 0.69 },
    { teamName: 'Tottenham Hotspur', GW34FIX: "BOU(A)", GW34: 1.67, GW35FIX: "ARS(H)", GW35: 0.9, GW36FIX: "NEW(A)", GW36: 1.42, GW37FIX: "LEI(H)", GW37: 1.14, GW38FIX: "CRY(A)", GW38: 2.04, AVG: "", FDR: 0.69 },
    { teamName: 'Watford', GW34FIX: "NOR(H)", GW34: 1.19, GW35FIX: "NEW(H)", GW35: 0.75, GW36FIX: "WHU(A)", GW36: 0.86, GW37FIX: "MCI(H)", GW37: "Update", GW38FIX: "ARS(A)", GW38: "Update", AVG: "", FDR: 0.69 },
    { teamName: 'West Ham United', GW34FIX: "BUR(H)", GW34: 0.79, GW35FIX: "NOR(A)", GW35: 1.85, GW36FIX: "WAT(H)", GW36: 1.16, GW37FIX: "MUN(A)", GW37: "Update", GW38FIX: "AVL(H)", GW38: "Update", AVG: "", FDR: 0.69 },
    { teamName: 'Wolverhampton Wanderers', GW34FIX: "SHU(A)", GW34: 1.11, GW35FIX: "EVE(H)", GW35: 0.93, GW36FIX: "BUR(A)", GW36: 0.82, GW37FIX: "CRY(H)", GW37: 1.79, GW38FIX: "CHE(A)", GW38: 1.03, AVG: "", FDR: 0.69 }
];

我正在尝试显示 GW3XFIX 的文本并根据 GW3X 的值应用背景颜色。 GW3X 的数量是基于算法的给定评级。我想根据数字的大小对字段进行颜色分级。如果低于0.7，则深红色，如果介于0.7和0.9之间，则为红色，如果介于0.9和1.1之间，则为灰色，如果介于1.1和1.3之间，则为绿色，如果高于1.3，则为深绿色。

这就是我加载 HTML table 的方式。

function loadTableData(teamData) {
    const tableBody = document.getElementById('teamData');
    let dataHtml = '';

    for(let team of teamData) {
        dataHtml += `<tr><td>${team.teamName}</td><td>${team.GW34FIX}</td><td>${team.GW35FIX}</td><td>${team.GW36FIX}</td><td>${team.GW37FIX}</td><td>${team.GW38FIX}</td><td>${team.AVG}</td></tr>`;
   }
    
    tableBody.innerHTML = dataHtml;
}

有办法吗？我尝试了多种方法都没有成功。

Answer 1

您可能正在寻找这样的东西：

function loadTableData(teamData) {
    const tableBody = document.getELementById("teamData");

    teamData.forEach((team) => {
        let row = document.createElement("tr");

        Object.keys(team).forEach((key) => {
            if (key == "teamName") {
                let el = document.createElement("td");
                el.innerText = team[key];
                row.prepend(el);
            } else if (key.match(/^GW3\dFIX$/) != null) {
                let el = document.createElement("td");
                el.innerText = team[key];
                el.style.background = team[key.replace("FIX", "")];
                row.append(el);
            }
        });

        tableBody.append(row):
    });
}

这里我们利用 Array.forEach 对数组中的每个元素（在本例中为每个团队）调用一个函数。我们将从 JS 中创建节点（使用 document.createElement），而不是您附加字符串的方法，这让事情对我们来说更容易一些。

接下来，我们使用 Object.keys() 其中 returns 对象的键作为数组，再次允许我们使用精彩的 Array.forEach 对其进行迭代。我们测试键以查看它是否是 teamName，它不能保证是第一个，这就是为什么我们为它创建的元素被添加到行的前面，所以它会在开头。

否则，如果它匹配团队名称的正则表达式 (/^GW3\dFIX$/)，则可以创建一个新单元格，填充文本内容并使用相同的键着色，除了 FIX已删除。

所有这些都追加到行中，最后追加到table!

Answer 2

试试这个：

function color(value) {
  return value<0.7?"darkred":
         value<0.9?"red":
         value<1.1?"grey":
         value<1.3?"green":
         "darkgreen";
}

function loadTableData(teamData) {
  var columns=Object.keys(teamData[0]).filter(key=>key.includes("FIX")).map(key=>key.slice(0,key.length-3));
  var tableHTML="";
  tableHTML+="<table>";
  tableHTML+="<tr>";
  tableHTML+="<th>Team</th>";
  for(var i=0; i<columns.length; i++) {
    tableHTML+="<th>"+columns[i]+"</th>";
  }
  tableHTML+="</tr>";
  for(var t=0; t<teamData.length; t++) {
    tableHTML+="<tr>";
    tableHTML+="<td>"+teamData[t].teamName+"</td>";
    for(var c=0; c<columns.length; c++) {
      tableHTML+="<td bgcolor='"+color(teamData[t][columns[c]])+"'>"+teamData[t][columns[c]+"FIX"]+"</td>";
    }
    tableHTML+="</tr>";
  }
  tableHTML+="</table>";
  document.getElementById('teamData').innerHTML=tableHTML;
}

假设所有 objects 具有相同的属性，使用它们中的任何一个来提取数据对都是安全的，所以我使用 teamData[0] 来获取 key-pairs 的数组，像这样：Object.keys(teamData[0]).
这样，我就 filter 找出了名称中带有“FIX”的键：filter(key=>key.includes("FIX")).
然后，我映射了这些键，只是没有“FIX”部分：map(key=>key.slice(0,key.length-3)).
我们剩下一个 key-pair-name 的数组：columns.
第一个循环（以及之前和之后的行）为 table.
创建了 header 然后，我们使用索引 t 为每个团队创建一行，从 teamName 开始，然后循环遍历 key-pairs，对 bgcolor 使用键，对值使用键+“FIX” ，使用 color 函数 returns 基于键值的颜色。
注意：您可以更改颜色以更好地满足您的需要。例如，“银色”比“灰色”浅。
最后，我们将整个 tableHTML 放在 teamData 的元素 innerHTML.

中

这是我从中得到的：

如何对 JavaScript 数组的值应用条件格式？

How do I apply conditional formatting on the values of a JavaScript array?

javascript

arrays

conditional-formatting