如何通过外部json文件使用Boostrap表获取列总和

<script src="data.json"></script>

<table class="table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <!-- 添加更多列 -->
    </tr>
  </thead>
  <tbody id="table-body">
    <!-- 表格内容将在JavaScript中动态生成 -->
  </tbody>
</table>

$(document).ready(function() {
  $.getJSON("data.json", function(data) {
    var sum = 0;
    var tableBody = $("#table-body");
    
    $.each(data, function(index, item) {
      var row = $("<tr>");
      var column1 = $("<td>").text(item.column1);
      var column2 = $("<td>").text(item.column2);
      var column3 = $("<td>").text(item.column3);
      // 添加更多列
      
      row.append(column1, column2, column3);
      tableBody.append(row);
      
      // 计算列总和
      sum += item.column1 + item.column2 + item.column3;
    });
    
    // 在表格底部添加总和行
    var totalRow = $("<tr>").addClass("table-info");
    var totalCell = $("<td>").attr("colspan", 3).text("列总和");
    var sumCell = $("<td>").text(sum);
    // 添加更多列总和
      
    totalRow.append(totalCell, sumCell);
    tableBody.append(totalRow);
  });
});