使用jquery删除动态创建的行，并绑定/更新现金总额

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

<table id="myTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>金额</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态添加的行将在这里插入 -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">现金总额：</td>
      <td id="totalAmount">0</td>
    </tr>
  </tfoot>
</table>

// 假设你有一个包含数据的对象数组，每个对象有名称和金额属性
var data = [
  { name: '商品1', amount: 100 },
  { name: '商品2', amount: 200 },
  // 更多数据...
];

$.each(data, function(index, item) {
  var row = $('<tr></tr>'); // 创建一行
  var nameCell = $('<td></td>').text(item.name); // 创建名称单元格并设置内容
  var amountCell = $('<td></td>').text(item.amount); // 创建金额单元格并设置内容
  var deleteCell = $('<td></td>'); // 创建删除按钮单元格
  var deleteButton = $('<button></button>').text('删除'); // 创建删除按钮
  deleteButton.on('click', function() {
    // 点击删除按钮时触发的事件
    row.remove(); // 删除当前行
    updateTotalAmount(); // 更新现金总额
  });
  deleteCell.append(deleteButton); // 将删除按钮添加到单元格中
  row.append(nameCell, amountCell, deleteCell); // 将单元格添加到行中
  $('#myTable tbody').append(row); // 将行添加到表格中的tbody中
});

// 更新现金总额的函数
function updateTotalAmount() {
  var total = 0;
  $('#myTable tbody td:nth-child(2)').each(function() {
    total += parseInt($(this).text()); // 累加金额
  });
  $('#totalAmount').text(total); // 更新现金总额单元格的内容
}