如何在PHP foreach循环中分别计算每位员工3个输入项的总和

现有代码问题 #

• 所有员工的输入框name属性完全重复，表单提交后后端仅能获取最后一名员工的输入值，无法区分不同员工的数据
• HTML结构不规范：<tr>标签闭合位置错误，无数据提示的<td>未被<tr>包裹，易导致渲染异常
• 未绑定员工唯一标识，计算出的总和无法对应到具体员工

改造步骤 #

1. 前端表单结构调整 #

将每个员工的输入框name改为带员工ID的数组格式，补全正确的表格结构，可选增加总和展示列：

<tbody>
  <form action="payment-code.php" method="POST">
    <?php 
       $query = "SELECT * FROM staffs";
       $query_run = mysqli_query($conn, $query); 
       if(mysqli_num_rows($query_run) > 0){
         foreach($query_run as $rows)
         {
       ?>
       <tr>
         <td>
             <?=$rows['staff_id']; ?>
             <input type="hidden" name="staff_id[]" value="<?=$rows['staff_id']; ?>">
         </td>
         <td>
            <?=$rows['firstname'] . $rows['surname']; ?>
         </td>
         <td>
            <input type="number" step="0.01" name="salary[<?=$rows['staff_id']; ?>]" class="form-control salary-input" placeholder="salary" required>
         </td>
         <td>
            <input type="number" step="0.01" name="totalbonus[<?=$rows['staff_id']; ?>]" class="form-control bonus-input" placeholder="total bonus" required>
         </td>
         <td>
            <input type="number" step="0.01" name="totalfee[<?=$rows['staff_id']; ?>]" class="form-control fee-input" placeholder="total fee" required>
         </td>
         <td>
            <span class="staff-total">0.00</span>
         </td>
       </tr>
       <?php
         }
       } else {
       ?>
        <tr>
          <td colspan="6">No record found!</td>
        </tr>
       <?php
        }
       ?>
       <tr>
         <td colspan="6">
           <button type="submit" class="btn btn-primary">提交计算</button>
         </td>
       </tr>
  </form>
</tbody>

2. 后端求和逻辑（payment-code.php） #

表单提交后，按员工ID遍历取值计算，得到每个员工独立的总金额：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $staffTotals = [];
  foreach ($_POST['staff_id'] as $staffId) {
    // 空值默认置0，转浮点型避免非法输入
    $salary = floatval($_POST['salary'][$staffId] ?? 0);
    $bonus = floatval($_POST['totalbonus'][$staffId] ?? 0);
    $fee = floatval($_POST['totalfee'][$staffId] ?? 0);
    
    // 按业务规则计算：fee为扣除项则减，为累加项则改为+
    $totalSum = $salary + $bonus - $fee;
    $staffTotals[$staffId] = $totalSum;
  }
  // $staffTotals 即为6名员工对应总金额的数组，键为员工ID，值为对应总和
  // 后续可直接用于入库、页面展示等逻辑
  print_r($staffTotals);
}
?>

3. 可选：前端实时计算总和 #

如果需要用户输入时即时看到当前员工的总金额，可在页面加如下JS代码：

document.querySelectorAll('.salary-input, .bonus-input, .fee-input').forEach(input => {
  input.addEventListener('input', function() {
    const currentRow = this.closest('tr');
    const salary = parseFloat(currentRow.querySelector('.salary-input').value) || 0;
    const bonus = parseFloat(currentRow.querySelector('.bonus-input').value) || 0;
    const fee = parseFloat(currentRow.querySelector('.fee-input').value) || 0;
    // 计算逻辑和后端保持一致
    const total = salary + bonus - fee;
    currentRow.querySelector('.staff-total').textContent = total.toFixed(2);
  })
})

注意事项 #

• 输入框建议使用number类型，限制只能输入数值，前后端都要做数值合法性校验，避免非法输入
• 求和逻辑中的totalfee计算符号要匹配实际业务：如果是扣除项用减法，如果是累加项直接三项相加即可
• 必须修正原代码的HTML结构错误，否则可能出现表单提交数据丢失、表格渲染错乱的问题

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