如何在Flask动态表格中实现数值的货币格式渲染

问题根因 #

1. 选择器匹配失效：jQuery选择器$("td.equity_price_gain")无匹配元素，原表格模板未给对应td添加equity_price_gain类名
2. 数值解析失败：td内提前写入了$美元符号实体，读取文本后执行parseFloat会返回NaN，格式化逻辑无法执行

可选修复方案 #

方案1：不修改原模板，仅替换JS脚本（快速生效） #

直接替换你现有JS代码即可，逻辑为指定匹配第三列单元格、过滤前置美元符号后做格式化：

$(document).ready(function() {
  $("table.table tr td:nth-child(3)").each(function() {
    // 提取纯数值部分
    const rawValue = $(this).text().trim().replace('$', '');
    const num = parseFloat(rawValue);
    if (!isNaN(num)) {
      // 写入格式化后内容
      $(this).text(num.toLocaleString('en-US', {
        style: 'currency', 
        currency: 'USD', 
        minimumFractionDigits: 2
      }));
    }
  })
})

方案2：优化实现（保留原始数值，适配后续表格计算需求） #

如果后续需要基于表格数值做前端排序、公式计算，建议修改模板存原始值，避免格式化字符影响计算：

1. 修改表格模板对应td代码：

<!-- 仅修改Price Gain列的td部分 -->
<td class="currency-field" data-raw-value="{{row.equity_price_gain}}">
  {{row.equity_price_gain}}
</td>

2. 替换对应JS脚本：

$(document).ready(function() {
  // 复用格式化实例提升性能
  const currencyFormatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2
  });
  $(".currency-field").each(function() {
    const rawVal = parseFloat($(this).data('raw-value'));
    if (!isNaN(rawVal)) {
      $(this).text(currencyFormatter.format(rawVal));
    }
  })
})

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