我需要将多个输入相加在一起，这些输入只能读取其他输入的总和

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>