如何使用jquery自动生成动态表的总价？

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<div id="tableContainer"></div>

$(document).ready(function() {
  var tableData = [
    { name: "商品1", price: 10 },
    { name: "商品2", price: 20 },
    { name: "商品3", price: 30 }
  ];

  var table = $("<table>").addClass("dynamic-table");
  var total = 0;

  // 创建表头
  var headerRow = $("<tr>");
  headerRow.append($("<th>").text("商品名称"));
  headerRow.append($("<th>").text("价格"));
  table.append(headerRow);

  // 创建表格行和列，并计算总价
  $.each(tableData, function(index, item) {
    var row = $("<tr>");
    row.append($("<td>").text(item.name));
    row.append($("<td>").text(item.price));
    table.append(row);
    total += item.price;
  });

  // 添加总价行
  var totalRow = $("<tr>").addClass("total-row");
  totalRow.append($("<td>").text("总价"));
  totalRow.append($("<td>").text(total));
  table.append(totalRow);

  // 将表格添加到容器中
  $("#tableContainer").append(table);
});