PHP销售管理系统计算总金额及剩余余额返回0问题求助

导致计算结果一直为0的核心原因 #

你在calculateTotal函数中使用document.getElementsByName('total')查询所有商品的单行总金额输入框，但实际你在新增行的模板中，给单行总金额输入框设置的name属性是total[]，二者完全不匹配，查询结果为空数组，累加后总金额自然一直为0。

其他共存BUG清单 #

• 新增行模板语法错误：模板开头写的是<tr;，缺少闭合尖括号，会导致新增行DOM结构异常
• 删除行逻辑错误：删除行后直接将计数变量x置为0，后续新增行会导致qty、cost、total等元素的ID重复，出现取值混乱
• 数值转换未兜底：输入框为空时parseInt会返回NaN，累加后会导致结果异常
• 删除按钮ID重复：所有新增行的删除按钮都使用id="btn"，违反HTML ID唯一规范，可能导致事件绑定失效

修复后的完整代码 #

修正后的JS代码 #

let x = 0;
function additem() {
  x++;
  // 修复<tr;语法错误
  var html=`<tr>
      <td><center>${x}</center></td>
      <td><input type='text' class='form-control' name='product_name[]' required></td>
      <td><input type='text' class='form-control' name='batch_no[]' required></td>
      <td><input type='text' class='form-control' name='remarks[]' required></td>
      <td><input id='qty${x}' type='number' class='form-control' oninput='calculate(${x})' name='total_qty[]' required></td>
      <td><input id='cost${x}' type='number' class='form-control'  oninput='calculate(${x})' name='cost[]' required></td>
      <td><input type='number' class='form-control' id='total${x}'  name='total[]' readonly required></td>
      <!-- 把id改成class，避免重复 -->
      <td><button type='button' class='btn btn-danger delete-btn'><i class='fa fa-remove'></i></button></td>
      </tr>`; 
  document.getElementById("tbody").insertRow().innerHTML= html;
}

function calculate(x) {
  const qty = document.getElementById(`qty${x}`).value || 0;
  const cost = document.getElementById(`cost${x}`).value || 0;
  const totalElem = document.getElementById(`total${x}`);
  totalElem.value = Number(qty) * Number(cost);
  calculateTotal();
}

function calculateTotal() {
  // 修复name查询参数，改为total[]
  let fields = document.getElementsByName('total[]');
  let total = 0;
  fields.forEach(f => {
    // 空值兜底，避免NaN
    total += Number(f.value || 0);
  })
  document.getElementById('totalamount').value = total;
  let paid = document.getElementById('total10').value || 0;
  let subtotal = total - Number(paid);
  document.getElementById('gtotal').value = subtotal;
}

// 绑定事件用class，删除后重新计算行号
$(document).on('click',".delete-btn", function(e) {
  $(this).closest('tr').remove();
  // 重新计算行号，避免ID重复
  x = 0;
  $('#tbody tr').each(function() {
    x++;
    $(this).find('td:first center').text(x);
    // 重新绑定calculate参数
    $(this).find('input[name^="total_qty"]').attr('oninput', `calculate(${x})`).attr('id', `qty${x}`);
    $(this).find('input[name^="cost"]').attr('oninput', `calculate(${x})`).attr('id', `cost${x}`);
    $(this).find('input[name^="total"]').attr('id', `total${x}`);
  })
  // 删除后重新计算总金额
  calculateTotal();
});

HTML补充修正建议 #

你现有HTML中Add按钮放在了<tbody>闭合标签之外，还有多余的</td>标签，建议调整位置到合理区域，避免表格结构异常。

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