如何根据值修改表格单元格（td）的文字颜色？现有代码无效

你的代码逻辑本身是正确的，没生效的核心原因是JS代码执行时机早于DOM渲染完成的时间——如果JS在表格元素加载前运行，document.getElementsByTagName("td")会获取到空的元素集合，自然无法修改单元格样式。

下面是两种可行的解决方法：

方法1：调整JS代码位置 #

把JS代码放到HTML表格的下方（比如</body>标签之前），确保DOM已经渲染出所有<td>元素后再执行代码：

<table>
  <tr>
    <td>OFF</td>
    <td>ON</td>
  </tr>
  <tr>
    <td>OFF</td>
    <td>ON</td>
  </tr>
  <tr>
    <td>OFF</td>
    <td>ON</td>
  </tr>
</table>

<script>
elements = document.getElementsByTagName("td")
for (var i = elements.length; i--;) {
  if (elements[i].innerHTML === "OFF") {
    elements[i].style.color = "red";
  }
}
</script>

方法2：监听DOM加载完成事件 #

通过DOMContentLoaded事件确保DOM完全加载后再执行代码，这种方式不受JS代码位置限制：

document.addEventListener('DOMContentLoaded', function() {
  const elements = document.getElementsByTagName("td");
  for (let i = elements.length; i--;) {
    // 用textContent替代innerHTML更安全，trim()处理单元格内可能存在的空格
    if (elements[i].textContent.trim() === "OFF") {
      elements[i].style.color = "red";
    }
  }
});

额外优化建议 #

• 优先使用textContent获取文本内容，避免innerHTML带来的HTML解析风险
• 加上trim()可以处理单元格内存在的空格、换行等空白字符，防止因文本内容不匹配导致判断失败

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