我需要將多個輸入相加在一起，這些輸入只能讀取其他輸入的總和

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>