如何通过JavaScript修改表格中超速数据的文本颜色？

嘿，这事儿不难搞定！你有两种思路可以实现这个需求，一种是填充完表格后统一遍历处理，另一种是在填充数据的时候直接判断并设置样式，我都给你列出来：

方案一：填充后遍历处理 #

这种方式适合已经有现有填充逻辑、不想大改的情况。只需要在你现有的循环代码后面，加上一段遍历表格行的逻辑就行：

// 原有的填充表格代码
for (i = 0; i < speeddata.length; i++) { 
  $('#speeddata').append('<tr>' + 
    '<td class="imei">' + speeddata[i].Imei + '</td>' + 
    '<td class="lat">' + speeddata[i].Latitude2 + '</td>' + 
    '<td class="lng">' + speeddata[i].Longitude2 + '</td>' + 
    '<td class="speed">' + speeddata[i].Speed + '</td>' + 
    '<td class="speedlimit">' + speeddata[i].speedlimits + '</td>' + 
  '</tr>'); 
}

// 新增的超速颜色处理逻辑
$('#speeddata tr').each(function() {
  // 获取当前行的speed和speedlimit单元格内容，转成数字（关键！不然字符串对比会出问题）
  const speed = parseFloat($(this).find('.speed').text());
  const speedLimit = parseFloat($(this).find('.speedlimit').text());
  
  // 对比数值，超速就修改文本颜色
  if (!isNaN(speed) && !isNaN(speedLimit) && speed > speedLimit) {
    $(this).find('.speed').css('color', 'red');
  }
});

关键说明： #

• 一定要用parseFloat（或者Number()）把单元格的文本转成数字！因为从DOM拿到的是字符串，直接用字符串对比会出错（比如"100"和"90"字符串对比时，"100"会被判定为小于"90"，因为第一个字符"1"比"9"小）。
• 加了!isNaN的判断是为了防止数据为空或者非数字的情况，避免报错。

方案二：填充数据时直接判断（更高效） #

如果想减少一次DOM遍历、提升性能，可以在构建表格行的时候就直接判断，给超速的单元格加上样式：

for (i = 0; i < speeddata.length; i++) { 
  // 提前判断当前数据是否超速
  const isOverSpeed = speeddata[i].Speed > speeddata[i].speedlimits;
  // 给speed单元格动态添加样式
  const speedTd = isOverSpeed 
    ? '<td class="speed" style="color:red">' + speeddata[i].Speed + '</td>'
    : '<td class="speed">' + speeddata[i].Speed + '</td>';
  
  $('#speeddata').append('<tr>' + 
    '<td class="imei">' + speeddata[i].Imei + '</td>' + 
    '<td class="lat">' + speeddata[i].Latitude2 + '</td>' + 
    '<td class="lng">' + speeddata[i].Longitude2 + '</td>' + 
    speedTd + 
    '<td class="speedlimit">' + speeddata[i].speedlimits + '</td>' + 
  '</tr>'); 
}

这种方式不需要事后再遍历整个表格，直接在生成DOM元素的时候就处理好，性能会更好，尤其是数据量比较大的时候。

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