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

Question

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

我正在尝试制作的示例。

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 表的方式。

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 ，它在数组中的每个元素（在这种情况下，每个团队）上调用 function。 我们将从 JS 中创建节点（使用document.createElement ），而不是附加字符串的方法，这对我们来说更容易一些。

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

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

所有这些都附加到行中，最后附加到表中！

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;
}

假设所有对象都具有相同的属性，使用它们中的任何一个来提取数据对都是安全的，所以我使用teamData[0]来获取密钥对数组，如下所示： Object.keys(teamData[0]) .
有了这个，我已经filter掉了名称中包含“FIX”的键： filter(key=>key.includes("FIX")) 。
然后，我映射了这些键，只是没有“FIX”部分： map(key=>key.slice(0,key.length-3)) 。
我们剩下一个 key-pair-name: columns数组。
第一个循环（以及之前和之后的行）为表创建 header。
然后，我们使用索引t为每个团队创建一行，从teamName开始，然后遍历键对，使用键作为bgcolor ，键+“FIX”作为值，使用color function 根据键的值返回颜色.
注意：您可以更改 colors 以更好地满足您的需求。 例如，“silver”比“gray”轻。
最后，我们将整个tableHTML放在teamData元素的innerHTML中。

这是我从中得到的：