javascript - 获取具有相同父 div 的所有文本框的值并显示总和

Question

我有两个类名相同的 div，每个 div 包含 5 个输入字段，其中 4 个输入字段，第五个用于显示总和。 有人可以帮我编写一个触发 onblur() 的 JavaScript，但仅从该 div 的输入字段中获取金额并在其总计中显示总和。 问题是所有输入字段都具有相同的类名，甚至两个 div 都具有相同的名称，所以我将如何区分它们。 我不能给他们 ID，因为我是从通用循环生成它的，该循环从数据库获取数据并根据数据库的结果数自行执行。

<div class="feerow">
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="8" data-clsec="345" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="9" data-clsec="345" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="10" data-clsec="345" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="11" data-clsec="345" />
    </div>
    <div class="feetext">
        <input class="amount" type="text" id="total" readonly="" disabled="disabled" />
    </div>
</div>
<div class="feerow">
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="8" data-clsec="346" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="9" data-clsec="346" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="10" data-clsec="346" />
    </div>
    <div class="feetext">
        <input class="amount"  type="text" data-feetype="11" data-clsec="346" />
    </div>
    <div class="feetext">
        <input class="amount" type="text" id="total" readonly="" disabled="disabled" />
    </div>
</div>

Answer 1

这是一个使用普通 javascript 的示例。我懒得在多个浏览器中测试它，但它似乎在 Chrome 中运行良好。基本上，每当有人输入内容时(您可以使用 input 事件而不是 blur 事件以获得更直接的结果)它会将行中的所有数字相加并显示在总数。我添加了一些代码将结果格式化为美元，因为它看起来像是在处理金钱。

function sumRow(row) {
  var fees = row.querySelectorAll("input:not(:disabled)"),
    total = Array.prototype.reduce.call(fees, function(sum, input) {
      return sum + (parseFloat(input.value) || 0);
    }, 0),
    formatted;

  if (total) {
    formatted = "$" + Math.round(100 * total);
    formatted = formatted.substr(0, formatted.length - 2) + "." + formatted.substr(-2);
  } else {
    formatted = "$0.00";
  }

  row.querySelector("input:disabled").value = formatted;
}

document.addEventListener("input", function(e) {
  sumRow(e.target.parentElement.parentElement);
});

window.addEventListener("load", function onLoad() {
  window.removeEventListener(onLoad);
  Array.prototype.forEach.call(document.querySelectorAll(".feerow"), sumRow);
});

<div class="feerow">
  <div class="feetext">
    <input class="amount" type="text" data-feetype="8" data-clsec="345" />
  </div>
  <div class="feetext">
    <input class="amount" type="text" data-feetype="9" data-clsec="345" />
  </div>
  <div class="feetext">
    <input class="amount" type="text" data-feetype="10" data-clsec="345" />
  </div>
  <div class="feetext">
    <input class="amount" type="text" data-feetype="11" data-clsec="345" />
  </div>
  <div class="feetext">
    <input class="amount" type="text" id="total" readonly="" disabled="disabled" />
  </div>
</div>
<div class="feerow">
  <div class="feetext">
    <input class="amount" type="text" data-feetype="8" data-clsec="346" />
  </div>
  <div class="feetext">
    <input class="amount" type="text" data-feetype="9" data-clsec="346" />
  </div>
  <div class="feetext">
    <input class="amount" type="text" data-feetype="10" data-clsec="346" />
  </div>
  <div class="feetext">
    <input class="amount" type="text" data-feetype="11" data-clsec="346" />
  </div>
  <div class="feetext">
    <input class="amount" type="text" id="total" readonly="" disabled="disabled" />
  </div>
</div>