Jinja2渲染的股票表格tbody中遍历行执行条件JS逻辑的实现问题

问题原因 #

你当前代码仅单行生效的核心原因是：HTML 中 id 属性要求全局唯一，你在 Jinja 循环里给每一行的涨跌幅、盈亏单元格都设置了相同的 id="Perc_change"、id="prolos"，原生 getElementById 只能匹配到第一个符合条件的元素，因此只有第一行逻辑生效。

修复步骤 #

1. 修改模板单元格属性

将循环生成的两个单元格的 id 改为 class，避免重复id问题：

{% for stock in stocks %}
  <tbody>
    <tr>
      <td>{{ stock["symbol"] }}</td>
      <td>{{ stock["name"] }}</td>
      <td>{{ stock["sumshares"] }}</td>
      <td>{{ stock["purchase_p"] | usd }}</td>
      <td>{{ stock['ap'] | usd }}</td>
      <!-- 把id改成class -->
      <td class="Perc_change">{{ stock['perc_change'] }}</td>
      <td class="prolos">{{ stock['prolos'] | usd }}</td>
      <td>{{ stock['total'] | usd }}</td> 
    </tr>
  </tbody>
{% endfor %}

（可选优化：建议把<tbody>标签移到{% for %}循环外面，避免生成多个tbody标签，符合表格语义规范）

2. 替换原有JS逻辑

新的JS会遍历表格所有行，逐行处理样式：

document.addEventListener("DOMContentLoaded", function(){
  // 获取表格所有行
  const rows = document.querySelectorAll('#mytab tbody tr');
  // 遍历每一行
  rows.forEach(row => {
    // 找到当前行的涨跌幅、盈亏元素
    const percChangeEl = row.querySelector('.Perc_change');
    const prolosEl = row.querySelector('.prolos');
    // 把涨跌幅字符串转成数字再比较
    const changeValue = Number(percChangeEl.innerHTML.trim());
    
    if (changeValue > 0) {
      percChangeEl.style.color = "green";
      percChangeEl.innerHTML += "%▲";
      prolosEl.style.color = "green";
    } else if (changeValue < 0) {
      percChangeEl.style.color = "red";
      percChangeEl.innerHTML += "%▼";
      prolosEl.style.color = "red";
    }
    // 涨跌为0的情况可以按需补充逻辑
  })
});

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