如何在JavaScript中实现表格金额求和？

你当前的代码里，totalAmount被初始化为字符串，循环中只是把每个金额用+拼接成字符串，导致最终显示的是一串带+的表达式，而非实际的总和数值。要实现正确的求和，需要把totalAmount作为数值类型来累加。

修正后的代码 #

HTML部分

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<table class="table table-bordered" id="saving_calc">
    <thead>
        <th>Date</th>
        <th>Amount</th>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

JavaScript部分

var tr = "";
// 初始化为数值0，而非空字符串
var totalAmount = 0;
var footerTr = "";

for(var i=1; i<=31; i++){
    var amount = i * 2;
    tr += `<tr>
        <td>${i}</td>
        <td>${amount}</td>
        </tr>`;
    // 累加数值，不是拼接字符串
    totalAmount += amount;
}

footerTr = `<tr>
    <th>Total</th>
    <th>${totalAmount}</th>
    </tr>`;

$('#saving_calc tbody').append(tr);
$('#saving_calc tfoot').append(footerTr);

关键修改点 #

• 将totalAmount的初始值从空字符串改为0，确保是数值类型
• 循环中直接累加每个金额的数值，而非拼接字符串
• 单独提取amount变量，让代码逻辑更清晰

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