使用jQuery为网页表格数值上色时<td>元素不生效问题排查

核心问题：样式被内部元素覆盖 #

你的代码确实给td加上了颜色类，但HTML结构里td内部嵌套了多层span（.fieldValue → .value → 对齐span），如果页面中已有针对这些内部span的颜色样式，或者这些span的样式优先级比td的类更高，td的颜色就会被覆盖，导致看不到效果。
你之前在div/p上生效是因为这些元素直接包含文本，没有多层嵌套的子元素覆盖样式。

解决方案1：把颜色类加到实际显示数值的元素上 #

直接操作最内层显示数字的span，而不是td。修改JavaScript代码：

$(document).ready(function() {
  var mc = {
    '0-19': 'red',
    '20-59': 'orange',
    '60-100': 'green'
  };

  function between(x, min, max) {
    return x >= min && x <= max;
  }

  $('td .value span').each(function() {
    var targetEl = $(this);
    // 从父级td获取原始数值
    var dc = parseInt(targetEl.closest('td').attr('data-rawvalue'), 10);
    
    // 先移除已有颜色类，避免重复叠加
    targetEl.removeClass('red orange green');
    
    if (!isNaN(dc)) {
      $.each(mc, function(name, value) {
        var first = parseInt(name.split('-')[0], 10);
        var second = parseInt(name.split('-')[1], 10);
        
        if (between(dc, first, second)) {
          targetEl.addClass(value);
        }
      });
    }
  });
});

解决方案2：提高CSS选择器优先级 #

如果不想修改JS，就强化CSS选择器，让td的颜色类能穿透到内部span：

td.red .fieldValue .value span {
  color: red;
}
td.orange .fieldValue .value span {
  color: orange;
}
td.green .fieldValue .value span {
  color: green;
}

如果还是不生效，可临时用!important强制覆盖（优先调整选择器优先级，不推荐长期使用）：

td.red .fieldValue .value span {
  color: red !important;
}

额外检查点 #

• 确认所有目标td都有data-rawvalue属性，没有的话parseInt会得到NaN，导致颜色判断失效。
• 打开浏览器开发者工具（F12），查看目标元素的样式面板，确认颜色样式是否被其他规则覆盖。

内容的提问来源于stack exchange，提问作者Andrzej Majewski Phones Rescue