如何在HTML和JS中对带千分位与小数的表格数值求和

问题根源 #

原代码直接用Number()解析1.200,00这类字符串会返回NaN，因为JavaScript默认遵循千分位用逗号、小数位用点的数值规则，无法识别点作为千分位分隔符、逗号作为小数分隔符的格式。

修改后的完整代码 #

HTML部分（无需改动）

<input type="text" id="suma">

<table id="myTable">
<tbody>
<tr>
<td>N</td>
<td>NOMBRE</td>
<td>MONTO</td>
</tr>
<tr>
<td>1</td>
<td>Alba</td>
<td>1.200,00</td>
</tr>
<tr>
<td>2</td>
<td>Andrea</td>
<td>1.200,00</td>
</tr>
<tr>
<td>3</td>
<td>Jose</td>
<td>1.200,00</td>
</tr>
</tbody>
</table>

JavaScript部分

// 辅助函数：把欧洲格式的数值字符串转成可计算的数字
function parseEuroNumber(str) {
  // 先去掉所有千分位的点，再把小数逗号换成点，最后转数字
  return Number(str.replace(/\./g, '').replace(',', '.'));
}

function total(){
    var table = document.getElementById('myTable');
    let total = 0;
    // 遍历表格行（跳过表头）
    for(let i = 1; i < table.rows.length; i++){
        // 用辅助函数解析MONTO列的数值
        total += parseEuroNumber(table.rows[i].cells[2].innerText);
    }
    const totalInput = document.getElementById('suma');
    // 把结果格式化成千分位点、小数逗号的形式，强制保留两位小数
    totalInput.value = Intl.NumberFormat('es-ES', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }).format(total);
}

关键修改说明 #

1. 数值解析：新增parseEuroNumber函数，先移除千分位的点，再替换小数逗号为点，让字符串符合JavaScript可解析的数值格式，彻底避免NaN。
2. 求和逻辑：将原代码的Number(...)替换为parseEuroNumber(...)，确保累加的是有效数字。
3. 结果格式化：用Intl.NumberFormat('es-ES')生成目标格式，通过强制保留两位小数，保证输出统一为X.XXX,XX的形式。

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