如何用HTML实现表格列值按条件设置字体颜色

静态数据场景 #

如果是固定数值，直接手动对应颜色编写<font>标签即可：

• 数值为0：<font color="Black">0</font>
• 数值大于0：<font color="Blue">123</font>
• 数值小于0：<font color="Red">-45</font>

动态数据场景（JavaScript批量处理） #

针对列数据这类动态内容，用JavaScript批量处理更高效，完全匹配你提供的逻辑：

完整示例代码 #

<table>
  <thead>
    <tr>
      <th>D列（原始值）</th>
      <th>E列（带颜色效果）</th>
    </tr>
  </thead>
  <tbody id="dataBody"></tbody>
</table>

<script>
// 模拟D列的数据源
const columnData = [0, 18, -5, 0, -30, 25];
const tbody = document.getElementById('dataBody');

columnData.forEach(value => {
  // 对应原iif逻辑的颜色判断，用三元表达式更贴近原写法
  const textColor = value === 0 ? "Black" : (value < 0 ? "Red" : "Blue");
  // 生成带颜色的单元格内容
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>${value}</td>
    <td><font color="${textColor}">${value}</font></td>
  `;
  tbody.appendChild(row);
});
</script>

逻辑说明 #

• 用嵌套三元表达式完全还原了你在Visual Studio中使用的iif逻辑：value === 0时取黑色，否则判断value < 0取红色，剩下的大于0情况取蓝色
• 通过遍历数据源，自动生成对应颜色的<font>标签，实现列数据的批量颜色设置

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