如何在Django循环场景中用JavaScript计算各值占总值的百分比？

你的代码核心问题是每次循环都获取同一个individual-market value元素的内容，没有匹配当前循环对应的行的独立值，导致所有行的百分比结果完全一致。以下是针对性的修复实现：

关键修改点 #

• 循环时精准获取当前行对应的独立值元素，而非全局同一个元素
• 提前获取总值并完成类型转换，避免循环内重复DOM查询，提升性能
• 增加数值合法性校验，避免出现NaN或除以0的错误

修复后的代码 #

// 提前获取固定总值并转成数字，避免循环内重复查询DOM
const totalValue = parseInt(document.getElementById("total-market-value").innerText);
// 获取所有需要填充百分比的目标元素
const pctElements = document.querySelectorAll('[id^="pct-of-pool"]');

// 遍历每个百分比元素，匹配对应行的独立值
pctElements.forEach((pctEl, index) => {
  // 按表格行关联逻辑获取当前行的独立值元素（可根据你的DOM结构调整选择器）
  const individualEl = pctEl.closest('tr').querySelector('[id^="individual-market-value"]');
  
  // 合法性校验：元素不存在或总值无效时填充0%
  if (!individualEl || isNaN(totalValue) || totalValue === 0) {
    pctEl.innerText = "0%";
    return;
  }

  const individualValue = parseInt(individualEl.innerText);
  // 独立值无效时填充0%
  if (isNaN(individualValue)) {
    pctEl.innerText = "0%";
    return;
  }

  // 计算百分比并保留两位小数
  const percentage = ((individualValue / totalValue) * 100).toFixed(2);
  pctEl.innerText = `${percentage}%`;
});

适配不同DOM结构的补充方案 #

如果你的表格行是按索引命名元素ID（比如individual-market-value-0、pct-of-pool-0），可以直接通过索引匹配：

const totalValue = parseInt(document.getElementById("total-market-value").innerText);
const pctElements = document.querySelectorAll('[id^="pct-of-pool"]');
const individualElements = document.querySelectorAll('[id^="individual-market-value"]');

pctElements.forEach((pctEl, index) => {
  const individualEl = individualElements[index];
  // 后续校验与计算逻辑同上
});

注意事项 #

• 确保total-market-value的数值不为0，否则会触发除以0的错误
• 所有数值元素的内容需为纯数字，否则parseInt会返回NaN，需根据业务场景补充异常处理
• 若你的DOM结构与示例不同，需调整选择器逻辑来关联百分比元素和对应行的独立值元素

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