JavaScript读取Firebase数据动态设置表格单元格颜色问题修复

原代码存在5个核心逻辑/语法错误，导致颜色渲染完全失效：

• 颜色判断逻辑写在了forEach循环外部，循环结束后才执行判断，此时data2只会是最后一条文档的数据，且模板字符串拼接时greencolor/redcolor变量还未定义
• Bullish和Bearish是字符串值，判断时没有加引号，会被识别为未定义变量
• HTML中bgcolor属性的变量写法错误，没有用模板插值，直接写了变量名作为属性值，浏览器无法解析
• DOM元素ID写错：tbody定义的id是myTable，代码里获取的是myTable2，会直接报元素不存在的错误
• 原判断逻辑错误固定了doji_dragon对应绿色、doji_grave对应红色，没有按照规则对两个字段分别判断：值为Bullish设绿色、Bearish设红色、其余为白色

HTML部分保持结构，注意tbody的ID对应：

<table class="table is-striped is-narrow is-hoverable is-fullwidth">
  <thead>
    <tr>
      <th>symbol</th>
      <th>doji dragon</th>
      <th>doji grave</th>
      <th>timeframe</th>
    </tr>
  </thead>
  <tbody id="myTable"></tbody>
</table>

JS逻辑部分把颜色判断放到循环内部，每条数据单独计算颜色，正确做模板插值：

const ref12 = collection(db, "doji4h");
const querySnapshot1 = await getDocs(ref12);
// 提前获取DOM元素，避免循环内重复查询
const table = document.getElementById('myTable');

querySnapshot1.forEach((doc2) => {
  const data2 = doc2.data();
  // 默认背景为白色
  let dragonBg = "white";
  let graveBg = "white";

  // 单独判断doji_dragon字段颜色
  if (data2.doji_dragon === "Bullish") {
    dragonBg = "green";
  } else if (data2.doji_dragon === "Bearish") {
    dragonBg = "red";
  }

  // 单独判断doji_grave字段颜色
  if (data2.doji_grave === "Bullish") {
    graveBg = "green";
  } else if (data2.doji_grave === "Bearish") {
    graveBg = "red";
  }

  // 正确拼接模板，属性值加引号，通过模板插值传入计算好的颜色值
  const row = `
    <tr>
      <td>${data2.symbol}</td>
      <td bgcolor="${dragonBg}">${data2.doji_dragon}</td>
      <td bgcolor="${graveBg}">${data2.doji_grave}</td>
      <td>${data2.timeframe}</td>
    </tr>
  `;
  table.innerHTML += row;
});

• 不推荐使用已废弃的bgcolor属性，建议改用标准CSS样式设置背景，写法为<td style="background-color: ${dragonBg}">，规范度和兼容性更好
• 数据量较大时不要每次循环都修改innerHTML，可以先把所有行的字符串拼接完成后，一次性赋值给table.innerHTML，减少DOM重绘提升性能

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