如何用JavaScript按ID选取HTML输入项无刷新计算多组小计与总计

解决方案 #

直接替换你原有<script>标签内的JS代码即可，HTML部分无需改动：

const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
// 预定义分组规则：fields对应输入框的name属性，targetId对应小计展示的元素id
const groupConfig = [
  {
    fields: ['item_1_amount', 'item_2_amount'],
    targetId: 'Total'
  },
  {
    fields: ['item_3_amount', 'item_4_amount', 'item_5_amount'],
    targetId: 'Total2'
  }
];

// 用input事件替代keyup，兼容鼠标点击数值增减按钮的场景
qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){
  // 存储当前输入值，空值默认按0计算
  results[ this.name ] = Number( this.value || 0 );
  
  let grandTotal = 0;
  // 遍历计算每个分组的小计
  groupConfig.forEach(group => {
    const groupSum = group.fields.reduce((sum, field) => {
      return sum + (results[field] || 0);
    }, 0);
    // 更新当前分组的小计展示
    q(`th#${group.targetId}`).textContent = groupSum;
    // 累加到总计
    grandTotal += groupSum;
  });
  // 更新总计展示
  q('th#Grandtotal').textContent = grandTotal;
}));

实现说明 #

• 支持实时计算：用户输入任意数值、清空输入时都会自动更新所有小计和总计，无需刷新页面
• 空值容错：未填写的输入项默认按0计算，不会出现NaN异常
• 易扩展：后续如果需要新增分组，只需在groupConfig数组中新增对应配置即可，无需修改核心逻辑

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