如何使用JavaScript计算动态表格中Line Total列的总和

问题背景 #

我在Web应用中使用JavaScript动态添加表格行，每行包含Qty列、Unit Price列和Line Total列，用户可删除已添加的行。需要计算Line Total列所有值的总和并显示为Total Value，现有代码如下：

现有HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.6.4.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div class="table-responsive text-nowrap">
  <table class="table table-striped" id="submissionTable">
    <thead>
      <tr>
        <th>#</th>
        <th>ITEM</th>
        <th>QTY</th>
        <th>MEASURE BY</th>
        <th>UNIT PRICE</th>
        <th>LINE TOTAL</th>
      </tr>
    </thead>
    <tbody class="table-border-bottom-0">
      <tr id="tablerow0"></tr>
    </tbody>
  </table>
  <p>
    <button id="add" type="button" class="btn btn-primary">Add</button>
  </p>
  <!-- 新增总计显示区域 -->
  <div class="mt-3 text-end">
    <strong>Total Value: </strong>
    <span id="totalValue">0.00</span>
  </div>
</div>

动态添加表格行的JavaScript代码 #

var counter = 1;

var dropdownOptions = @Html.Raw(Json.Encode(ViewBag.Item_ID));

$(function () {
  $("#add").click(function () {
    var newRow = $(
       '<tr id="tablerow' +
       counter +
       '" class ="poSet"> ' +
       "<td>" +
       '<label id="CountItems"><strong>' +
       counter +
       "</strong></label>" +
       "</td>" +
       '<td width="40%">' +
       '<select onchange="sendInfo(this)" class="form-select ItemId" data-id= ' + counter + ' name="Item_Id[' +
       counter +
       ']" id="ItemId[' + counter + ']" required="required" ' +
       "</select>" +
       "</td>" +
       '<td width="10%">' +
       '<input type="text" class="form-control Qty" name="Qty[' +
       counter +
       ']" value="1" id="Qty[' + counter + ']" onchange="calQtyBase(this)" data-QtyId= ' + counter + ' required="required" />' +
       "</td>" +
       '<td width="10%">' +
       '<input type="text" class="form-control" name="MeasureBy[' +
       counter +
       ']" value="" id="MeasureBy[' + counter + ']" readonly />' +
       "</td>" +
       '<td width="20%">' +
       '<input type="text" class="form-control UnitPrice" name="Unit_Price[' +
       counter +
       ']" value="0.00" id="UnitPrice[' + counter + ']"  onchange="priceBase(this)" data-PriceId= ' + counter + '  required="required" />' +
       "</td>" +
       '<td width="20%">' +
       '<input type="text" class="form-control LineTotal" name="Line_Total[' +
       counter +
       ']" value="0.00" id="LineTotal[' + counter + ']"    required="required" />' +
       "</td>" +
       "<td>" +
       '<button type="button" class="btn btn-danger" onclick="removeTr(' +
       counter +
       ');">x</button>' +
       "</td>" +
       "</tr>"
     );
    
    var selectElement = newRow.find("select"); 

    dropdownOptions.forEach(function (option) {
      var optionElement = $("<option>").val(option.Value).text(option.Text);
      selectElement.append(optionElement);
    });

    newRow.appendTo("#submissionTable");

    selectElement.select2();

    counter++;
    // 添加行后更新总计
    calculateTotal();
    return false;
  });
});

现有Line Total计算函数 #

function calQtyBase(e) {
   var dataId = e.getAttribute("data-QtyId");
   var Qty = document.getElementById('Qty[' + dataId + ']').value;
   var UnitAmount = parseFloat(document.getElementById('UnitPrice[' + dataId + ']').value);
   var total = Qty * UnitAmount;
   document.getElementById('LineTotal[' + dataId + ']').value = parseFloat(Math.round(total * 100) / 100).toFixed(2);
   // 更新总计
   calculateTotal();
}

function priceBase(e) {
   var dataId = e.getAttribute("data-PriceId");
   var Qty = document.getElementById('Qty[' + dataId + ']').value;
   var UnitAmount = parseFloat(document.getElementById('UnitPrice[' + dataId + ']').value);
   var total = Qty * UnitAmount;
   document.getElementById('LineTotal[' + dataId + ']').value = parseFloat(Math.round(total * 100) / 100).toFixed(2);
   // 更新总计
   calculateTotal();
}

新增总和计算与删除行函数 #

// 计算所有Line Total的总和
function calculateTotal() {
  let total = 0;
  // 遍历所有LineTotal输入框
  document.querySelectorAll('.LineTotal').forEach(input => {
    const value = parseFloat(input.value) || 0;
    total += value;
  });
  // 格式化保留两位小数并显示
  document.getElementById('totalValue').textContent = parseFloat(Math.round(total * 100) / 100).toFixed(2);
}

// 完整删除行函数
function removeTr(id) {
  document.getElementById('tablerow' + id).remove();
  // 删除行后更新总计
  calculateTotal();
}

实现说明 #

1. 添加总计显示区域：在HTML表格下方新增了用于展示Total Value的元素，ID为totalValue。
2. 总和计算函数：calculateTotal函数通过遍历所有带有LineTotal类的输入框，累加数值后格式化显示。
3. 实时更新触发：在单行Line Total计算完成、新增表格行、删除表格行后，均调用calculateTotal确保总计实时同步。
4. 删除行逻辑补全：完善了removeTr函数，删除指定行后立即更新总计。

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