PHP+HTML表格联动：修改单价/数量自动更新行与累计总计

嘿，别发愁！我给你写了一套完整的代码，直接替换你原来的表格部分就能用，完全不用你懂JavaScript～

核心思路 #

1. 给每个输入框加上统一的类名，让JavaScript能精准定位元素
2. 监听单价/数量的输入变化，实时计算当前行的sum（单价×数量）
3. 从修改的行开始，重新计算后续所有行的totalsum（上一行累计总计+当前行sum）

完整代码替换 #

把你原来的<tbody>部分换成下面这段代码：

<tbody>
<?php 
$sql=sprintf("SELECT * FROM rostosativos_invoiceprop WHERE id_proposta = '%s'", $_GET['id']); 
$res=mysqli_query($link, $sql); 
$rowIndex = 0; // 标记每一行的索引
while ($r=mysqli_fetch_assoc($res)){ 
?> 
<tr data-row-index="<?php echo $rowIndex; ?>"> 
<td><input type="text" value="<?php echo $r['produto']; ?>" name="product"></td> 
<td><input type="text" value="<?php echo $r['precouni']; ?>" name="priceunit" class="price-unit" step="0.01"></td> 
<td><input type="text" value="<?php echo $r['quantidade']; ?>" name="quantity" class="quantity" step="1"></td> 
<td><input type="text" value="<?php echo $r['soma']; ?>" name="sum" class="row-sum" readonly></td> 
<td><input type="text" value="<?php echo $r['totalsoma']; ?>" name="totalsum" class="total-sum" readonly></td> 
<td class="actions"> 
<a href="maisproposta?id=<?php echo $r['id_proposta']; ?>" class="delete-row"><i class="fa fa-plus-square"></i></a> 
</td> 
</tr> 
<?php 
$rowIndex++; 
} 
?> 
</tbody>

<!-- 自动计算的JavaScript代码，直接放在表格后面即可 -->
<script>
// 获取所有单价和数量输入框
const priceInputs = document.querySelectorAll('.price-unit');
const quantityInputs = document.querySelectorAll('.quantity');

// 给每个输入框绑定计算事件
priceInputs.forEach(input => input.addEventListener('input', calculateRow));
quantityInputs.forEach(input => input.addEventListener('input', calculateRow));

function calculateRow(e) {
    // 获取当前所在行
    const row = e.target.closest('tr');
    const rowIndex = parseInt(row.dataset.rowIndex);
    
    // 读取当前行的单价和数量，非数字内容自动转为0
    const price = parseFloat(row.querySelector('.price-unit').value) || 0;
    const quantity = parseFloat(row.querySelector('.quantity').value) || 0;
    
    // 计算行总计并保留两位小数
    const sum = (price * quantity).toFixed(2);
    row.querySelector('.row-sum').value = sum;
    
    // 重新计算从当前行开始的累计总计
    updateTotalSums(rowIndex);
}

function updateTotalSums(startIndex) {
    const rows = document.querySelectorAll('tbody tr');
    let previousTotal = 0;
    
    // 获取修改行之前的最后一行累计总计
    if (startIndex > 0) {
        previousTotal = parseFloat(rows[startIndex - 1].querySelector('.total-sum').value) || 0;
    }
    
    // 从修改行开始遍历，更新每一行的累计总计
    for (let i = startIndex; i < rows.length; i++) {
        const currentSum = parseFloat(rows[i].querySelector('.row-sum').value) || 0;
        previousTotal += currentSum;
        rows[i].querySelector('.total-sum').value = previousTotal.toFixed(2);
    }
}
</script>

代码说明 #

• 给每一行加了data-row-index属性，用来标记行的位置，方便后续累计计算
• 单价、数量输入框添加了专属类名，JavaScript通过类名快速找到需要监听的元素
• sum和totalsum输入框设置了readonly，避免用户手动修改，保证数据准确性
• 用toFixed(2)强制保留两位小数，符合金额的显示规范
• 处理了非数字输入的情况（比如输入字母），自动转为0计算，避免页面报错

这样修改后，你只要修改任意一行的单价或数量，对应的行总计和后续所有行的累计总计就会自动更新啦～

内容的提问来源于stack exchange，提问作者João Neves