如何根据单元格值动态设置 HTML 表格背景色

在网页开发中，HTML表格常用于展示结构化数据，为了提升数据的可读性，我们经常需要根据单元格的具体数值动态调整其背景色，让不同数值区间的数据拥有更直观的视觉区分。这种需求在数据统计、报表展示等场景中非常常见，实现的核心思路是通过JavaScript遍历表格的所有单元格，读取单元格内的数值，再根据预设的条件规则修改对应单元格的样式属性。

基础表格结构搭建

首先我们需要先构建一个基础的HTML表格，作为后续动态设置背景色的操作对象。表格可以包含表头和数据行，数据单元格内放置需要判断的数值内容。

<table id="scoreTable" border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文成绩</th>
      <th>数学成绩</th>
      <th>英语成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>58</td>
      <td>92</td>
      <td>85</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>76</td>
      <td>45</td>
      <td>68</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>90</td>
      <td>88</td>
      <td>52</td>
    </tr>
  </tbody>
</table>

核心实现逻辑

动态设置背景色的过程主要分为三步：第一步获取目标表格元素，第二步遍历表格中所有的数据单元格，第三步读取每个单元格的数值并匹配条件，最后修改单元格的style.background属性。

遍历单元格并读取数值

我们可以通过getElementById获取表格元素，再通过getElementsByTagName获取所有的<td>单元格，然后循环遍历每个单元格。需要注意的是，表头的<th>单元格通常不需要设置背景色，所以遍历时只处理<td>元素即可。

条件判断与样式设置

根据业务需求定义判断规则，比如成绩场景中，低于60分的单元格设置为红色背景，60到80分的设置为黄色背景，80分以上的设置为绿色背景。判断时需要将单元格的文本内容转换为数值类型，避免字符串比较导致的逻辑错误。

完整代码示例

以下是可直接运行的完整实现代码，包含表格结构和动态设置背景色的JavaScript逻辑：

// 等待DOM加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标表格元素
  const table = document.getElementById('scoreTable');
  // 获取表格中所有的td单元格
  const cells = table.getElementsByTagName('td');
  
  // 遍历所有单元格
  for (let i = 0; i < cells.length; i++) {
    const cell = cells[i];
    // 获取单元格文本内容并转换为数值
    const value = parseFloat(cell.textContent);
    
    // 跳过非数值的单元格，比如姓名列
    if (isNaN(value)) {
      continue;
    }
    
    // 根据数值设置不同的背景色
    if (value < 60) {
      // 低于60分，红色背景
      cell.style.background = '#ffcccc';
    } else if (value >= 60 && value < 80) {
      // 60到80分，黄色背景
      cell.style.background = '#fff2cc';
    } else {
      // 80分以上，绿色背景
      cell.style.background = '#d9ead3';
    }
  }
});

注意事项

• 单元格内容如果包含非数值字符，比如"92分"，需要先处理字符串再转换为数值，否则parseFloat会返回NaN，导致判断逻辑失效。
• 如果表格是动态加载的，比如通过Ajax请求获取数据后渲染的表格，需要在表格渲染完成后再执行背景色设置的逻辑，避免遍历时获取不到单元格。
• 如果需要修改的规则较多，可以把条件判断逻辑封装成独立的函数，提升代码的可维护性，比如定义一个getBackgroundColorByValue函数，接收数值返回对应的颜色值。

扩展场景

除了成绩表场景，这个逻辑还可以应用到很多其他场景，比如库存表中库存量低于10的单元格标红，订单表中金额超过1000的单元格标绿，进度表中进度低于30%的单元格标黄等。只需要修改对应的条件判断规则和颜色值，就可以适配不同的业务需求。

HTML_tableJavaScriptDOM操作条件渲染修改时间：2026-06-09 01:15:24