调整JavaScript脚本实现qty1至qty9字段的求和计算

方案一：通过正则匹配name属性 #

修改findTotal函数，用document.querySelectorAll筛选所有name以qty开头且后缀为1-9数字的输入框：

function findTotal() {
  var arr = document.querySelectorAll('input[name^="qty"][name$="[1-9]"]');
  var tot = 0;
  for (var i = 0; i < arr.length; i++) {
    var value = parseFloat(arr[i].value);
    if (!isNaN(value)) { // 更严谨的数值校验，排除空值或非数值干扰
      tot += value;
    }
  }
  document.getElementById('total').value = tot.toFixed(2);
}

方案二：给输入框添加统一类名（更直观） #

给所有需要求和的输入框新增同一个类名，比如qty-input：

<td id="col3">
  <input class="form-control qty-input" onblur="findTotal()" type="number" name="qty1" readonly/><br>
</td>

再修改脚本通过类名批量获取元素：

function findTotal() {
  var arr = document.querySelectorAll('.qty-input');
  var tot = 0;
  for (var i = 0; i < arr.length; i++) {
    var value = parseFloat(arr[i].value);
    if (!isNaN(value)) {
      tot += value;
    }
  }
  document.getElementById('total').value = tot.toFixed(2);
}

方案三：循环遍历指定范围的name #

如果确定name固定为qty1到qty9，可直接循环数字1-9逐个获取元素：

function findTotal() {
  var tot = 0;
  for (var i = 1; i <= 9; i++) {
    var input = document.getElementsByName('qty' + i)[0];
    if (input) { // 确保元素存在再处理
      var value = parseFloat(input.value);
      if (!isNaN(value)) {
        tot += value;
      }
    }
  }
  document.getElementById('total').value = tot.toFixed(2);
}

额外提示 #

• 原示例中输入框的id重复（都设为qty）违反HTML规范，建议去掉重复id或给每个输入框设置唯一id（如qty1、qty2）。
• 用!isNaN(value)替代原判断逻辑，能更准确处理空值、非数值输入的情况，避免计算错误。

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