我需要将多个输入加在一起，这些输入是 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 class 来实现。这样，您最终得到多少行并不重要，您不必担心行或单元格，只需要属于相同 class.

的输入

所以，下面是一个示例，展示了如何获取总计列的总数，但同样的方法也适用于任何其他列。

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>

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

I need to add together multiple inputs, which are read only totals of 2 other inputs

javascript

jquery

input

addition