2 개의 다른 입력 값의 합계를 읽는 다중 입력 값을 더해야합니다.

Question

기본적으로 합계 입력 값을 합하여 최종 합계 값을 만드는 데 도움이 필요합니다. 수량과 단가가 함께 추가 그래서 당신은 위의 이미지에서 볼 수 있듯이,이

다중 입력 할 수 있으며, 사람이 버튼의 클릭으로 더 추가 할 수 있습니다, 코드가 작동, 그러나 나는 gbp 총계를 새롭게하는 것을 계속하기 위하여 자동적으로 추가 합계 부분 다음이다. 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); 
} 

위의 자바 스크립트는 이미 작동이 나는 서브 총 동일한 작업을 수행 할 방법을 고민하고, 함께 수량과 단가를 모두 곱한 것입니다, 추가

<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> 

모든 하위 합계 (많은 경우)가 표시 될 수 있으며 £ 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>