求助：实现表格tr和td随机着色的JavaScript代码优化

你的代码里有几个关键问题导致无法实现预期的随机着色效果，我来帮你修正并解释清楚问题出在哪：

问题分析 #

• DOM元素选择错误：document.body.table.tr.td不是有效的DOM查询方式，这样根本获取不到任何<td>元素。要获取页面中所有的表格单元格，应该用document.querySelectorAll('td')，它会返回所有匹配的元素集合。
• 随机索引越界：你的colors数组只有3个元素（索引范围是0、1、2），但你用Math.floor(Math.random()*10)会生成0-9的随机数，当索引大于2时，colors[index]会是undefined，设置背景色自然无效。正确的做法是基于数组长度生成索引，也就是Math.floor(Math.random() * colors.length)。
• 未遍历所有元素：你只尝试给单个元素设置颜色，但需要循环遍历所有<td>，才能让每个单元格都获得随机颜色。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<body>
<table border="1" width="200" height="100"> 
  <tr> 
    <td id="demo">Moustafa</td> 
    <td>Java</td> 
    <td>Html</td> 
  </tr> 
  <tr> 
    <td>Moustafa</td> 
    <td>Java</td> 
    <td>Html</td> 
  </tr> 
  <tr> 
    <td>Moustafa</td> 
    <td>Java</td> 
    <td>Html</td> 
  </tr> 
  <tr> 
    <td>Moustafa</td> 
    <td>Java</td> 
    <td>Html</td> 
  </tr> 
</table> 
<button onclick="RandomColor()">Try it</button>

<script>
const colors = ["red","blue","green"]; 
function RandomColor(){ 
  // 获取页面中所有<td>元素
  const tdElements = document.querySelectorAll('td'); 
  // 遍历每个单元格，逐个设置随机背景色
  tdElements.forEach(td => {
    // 生成有效范围内的随机索引
    const randomIndex = Math.floor(Math.random() * colors.length); 
    td.style.backgroundColor = colors[randomIndex]; 
  });
} 
</script>
</body>
</html>

代码说明 #

1. 使用document.querySelectorAll('td')获取所有表格单元格，得到一个可遍历的元素集合。
2. 通过forEach循环遍历每个<td>元素，确保每个单元格都被处理。
3. 基于colors.length生成随机索引，保证每次都能从数组中拿到有效的颜色值，不会出现索引越界的问题。

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