我需要将多个输入相加，这些输入是 2 个其他输入的只读总计

Question

我需要帮助，基本上将总输入加在一起，以使它们加在一起以创建最终数量。

如上图所示，可以有多个输入，点击按钮可以添加更多，代码可以工作，所以数量和单价相加，但是我在小计之后自动相加以不断更新 gbp 总量。

<table>
  <tr>
    <td>
      <input type="number" oninput="calculate(this)" id="qid1" data-quantity name="qamount" min="0" data-validation="number" class="qinput txt" value="{{Quantity}}" />
    </td>
    <td>
      <input type="text" data-validation="length" data-validation-length="max100" class="dinput" value="{{Details}}" />
    </td>
    <td>
      <input type="number" oninput="calculate(this)" id="uid1" data-unitprice name="uamount" min="0" data-validation="number" data-validation-allowing="float" class="uinput txt" value="{{UnitPrice}}" />
    </td>
    <td>
      <input readonly id="subsubtotal" name="totalamount" class="sinput txt" value="{{Subtotal}}" />
    </td>
  </tr>
</table>

<div class="additembtton">
  <button id="bttonitem">Add Invoice Item</button>
  <input id="bttonitem1" type="submit" value="Save" />
  <span class="gbptotal">GBP Total</span>
  <span id="totalplus" class="totalsub">£0.00</span>
</div>

JS

//code that multiplies the quantity and unit price input boxes
function calculate(obj) {
    var tr = obj.parentNode.parentNode;
    var myBox1 = tr.cells[0].children[0].value;
    var myBox2 = tr.cells[2].children[0].value;
    var result = tr.cells[3].children[0];
    var myResult = parseFloat(myBox1) * parseFloat(myBox2);
    result.value = myResult.toFixed(2);
}

上面的javascript已经可以工作了，这将数量和单价相乘，我正在努力解决如何对小计做同样的事情，将所有小计加在一起（不管有多少） ，并在 £0.00 所在的位置显示最终总数。

Answer 1

<input id="bttonitem1" type="submit" value="Save" onclick="gbpTotal()">

function gbpTotal(){

    var total = 0;

    var inputs = document.querySelectorAll('.sinput');

    inputs.forEach(function(e){

        total += parseFloat(e.value);

    });

    document.querySelector('#totalplus').textContent = total;

};

您可能希望在他们点击输入而不是保存时触发该功能

Answer 2

您需要在汇总时查询来自同一列的所有输入。这最好通过确保每列中的输入属于同一个 CSS 类来实现。这样一来，您最终得到多少行都没有关系，您不必担心行或单元格，只需考虑属于同一类的输入即可。

因此，这里有一个示例说明如何获取总列的总数，但相同的方法将用于任何其他列。

var totals = document.querySelectorAll(".total");
var output = document.getElementById("total");
var btn = document.querySelector("button");

btn.addEventListener("click", function(){
  
  var tot = null;
  // Convert the node list of inputs that hold totals into an array and loop through that array
  Array.prototype.slice.call(totals).forEach(function(element){
    // Get the sum of the values
    tot += parseFloat(element.value);
  });
  
  // Display the output
  output.textContent = tot;

});

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>  
      <th>Total</th>    
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="name"></td>
      <td><input type="text" class="price"></td>
      <td><input type="text" class="qty"></td>  
      <td><input type="text" class="total"></td>    
    </tr>  
    <tr>
      <td><input type="text" class="name"></td>
      <td><input type="text" class="price"></td>
      <td><input type="text" class="qty"></td>  
      <td><input type="text" class="total"></td>    
    </tr>  
    <tr>
      <td><input type="text" class="name"></td>
      <td><input type="text" class="price"></td>
      <td><input type="text" class="qty"></td>  
      <td><input type="text" class="total"></td>    
    </tr>      
  </tbody>
</table>
<div id="total"></div>
<button>Get Totals</button>