Question

我有两个相同类名的div，每个div包含5个输入字段，其中4个是输入字段，第五个用于显示总和。有人可以帮助我编写一个触发onblur（）的JavaScript，但只从该div的输入字段中获取金额并在其Total中显示总和。问题是所有输入字段都有相同的类名，甚至两个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>

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

1 个答案: