Javascript 是否根据值更改单元格背景颜色？

我有一个函数，它接受一个2d数组并创建一个表。我想根据单元格中的值更改单元格背景色。例如（如果cellVal>0，则将背景更改为绿色）

让转置数组=[
[a'，3]，[b'，2]，[c'，4]，
[[1, -3], [2, 2], [3, -1]]
]
函数createTable（tableData）{
var table=document.createElement（'table'）；
让我们划船；
let细胞；
tableData.forEach（函数（rowData）{
行=table.insertRow（-1）；
rowData.forEach（函数（cellData）{
cell=row.insertCell（）；
cell.textContent=cellData[0]；
设cellVal=cellData[1]；
如果（cellVal>0）{
cell.classList.add（'green'）
}
});
});
document.body.appendChild（表）；
}
createTable（转置数组）

.green{
背景颜色：绿色；
}

让转置数组=[
[a'，3]，[b'，2]，[c'，4]，
[[1, -3], [2, 2], [3, -1]]
]
函数createTable（tableData）{
var table=document.createElement（'table'）；
让我们划船；
let细胞；
tableData.forEach（函数（rowData）{
行=table.insertRow（-1）；
rowData.forEach（函数（cellData）{
cell=row.insertCell（）；
cell.textContent=cellData[0]；
设cellVal=cellData[1]；
如果（cellVal>0）{
cell.classList.add（'green'）
}
});
});
document.body.appendChild（表）；
}
createTable（转置数组）

.green{
背景颜色：绿色；
}

tableData.forEach（函数（rowData，i）{
行=table.insertRow（-1）；
cell=row.insertCell（）；
cell.textContent=行标题[i]；
rowData.forEach（函数（cellData）{
cell=row.insertCell（）；
cell.textContent=cellData；
设cellVal=cellData；
//为pos/neg（基于%）制作不同颜色的绿色和红色单元格
如果（cellVal>0）{
cell.style.backgroundColor='#00e100'；
}else if（cellVal<0）{
cell.style.backgroundColor='红色'；
}
});
});
document.body.appendChild（表）；
}

tableData.forEach（函数（rowData，i）{
行=table.insertRow（-1）；
cell=row.insertCell（）；
cell.textContent=行标题[i]；
rowData.forEach（函数（cellData）{
cell=row.insertCell（）；
cell.textContent=cellData；
设cellVal=cellData；
//为pos/neg（基于%）制作不同颜色的绿色和红色单元格
如果（cellVal>0）{
cell.style.backgroundColor='#00e100'；
}else if（cellVal<0）{
cell.style.backgroundColor='红色'；
}
});
});
document.body.appendChild（表）；
}

插入html和css plstd{边框：1px纯黑色；填充：4px；文本对齐：中心；垂直对齐：中间；宽度：20px；高度：20px；}表格{边框折叠：折叠；边框间距：0；}没有html。全部由函数Insert html和css plstd创建{边框：1px纯黑色；填充：4px；文本对齐：中心；垂直对齐：中间；宽度：20px；高度：20px；}表格{边框折叠：折叠；边框间距：0；}没有html。所有由函数创建的对象最好使用

.classList.add（'green'）

并为此CSS而不是内联CSS创建。最好使用

.classList.add（'green'）

并为此CSS而不是内联CSS创建。

//function to create the table
function createTable(tableData) {
  var table = document.createElement('table');
  var row = {};
  var cell = {};

  tableData.forEach(function (rowData) {
    row = table.insertRow(-1);
    rowData.forEach(function (cellData) {
      cell = row.insertCell();

      cell.textContent = cellData;
    });
  });
  document.body.appendChild(table);
}
createTable(transpose_array)

//css
td {
  border: 1px solid black;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;

}

tableData.forEach(function (rowData,i) {
    row = table.insertRow(-1);
    cell = row.insertCell();
    cell.textContent = row_headings[i];

    rowData.forEach(function (cellData) {
      cell = row.insertCell();
      cell.textContent = cellData;
      let cellVal = cellData;
      //make cells different shaeds of green and red for pos/neg (based on %)
      if (cellVal > 0) {
        cell.style.backgroundColor = '#00e100';
      } else if (cellVal < 0) {
        cell.style.backgroundColor = 'red';
      }
    });
  });
 document.body.appendChild(table);

}