如何在HTML JavaScript中循环获取ID计算数量与价格乘积？

方法一：后端提前计算（适合JS基础薄弱的场景，最简单） #

直接在Django视图层完成乘积计算，把结果传给模板渲染，完全不需要写JavaScript。

1. 视图层代码：

# views.py
def bill_detail(request, bill_id):
    bill = Bill.objects.get(id=bill_id)
    items = bill.items.all()
    # 给每个账单明细添加小计字段
    for item in items:
        item.subtotal = item.quantity * item.price
    return render(request, 'bill_detail.html', {'bill': bill, 'items': items})

2. 模板层代码：

<!-- bill_detail.html -->
<table>
  <tr>
    <th>商品</th>
    <th>数量</th>
    <th>单价</th>
    <th>小计</th>
  </tr>
  {% for item in items %}
  <tr>
    <td>{{ item.name }}</td>
    <td>{{ item.quantity }}</td>
    <td>{{ item.price }}</td>
    <td>{{ item.subtotal }}</td>
  </tr>
  {% endfor %}
</table>

方法二：前端JavaScript计算（支持实时修改数量/价格后自动更新） #

如果需要在前端修改数值后实时计算小计，给每行的元素添加专属类名，在当前行范围内获取对应数据即可避免取值混乱。

1. 模板层代码：

<!-- bill_detail.html -->
<table id="bill-table">
  <tr>
    <th>商品</th>
    <th>数量</th>
    <th>单价</th>
    <th>小计</th>
  </tr>
  {% for item in items %}
  <tr class="bill-row">
    <td>{{ item.name }}</td>
    <td><input type="number" class="qty-input" value="{{ item.quantity }}"></td>
    <td><input type="number" class="price-input" value="{{ item.price }}"></td>
    <td class="subtotal-cell"></td>
  </tr>
  {% endfor %}
</table>

2. JavaScript代码：

// 获取所有账单行
const rows = document.querySelectorAll('.bill-row');

// 单行列内计算函数
function calculateSubtotal(row) {
  const qty = parseFloat(row.querySelector('.qty-input').value) || 0;
  const price = parseFloat(row.querySelector('.price-input').value) || 0;
  const subtotal = (qty * price).toFixed(2); // 保留两位小数
  row.querySelector('.subtotal-cell').textContent = subtotal;
}

// 页面加载时初始化所有行小计
rows.forEach(row => {
  calculateSubtotal(row);
  // 监听输入变化，实时更新小计
  row.querySelector('.qty-input').addEventListener('input', () => calculateSubtotal(row));
  row.querySelector('.price-input').addEventListener('input', () => calculateSubtotal(row));
});

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