Javascript-計算された入力の特定の列の合計（テーブル）

私はWeb開発の初期段階です。ここでは、以下のように計算された一連の行から合計（合計）を取得したいと考えています。 Amount列の各行を計算するためのコードを生成するのを手伝ってください。私はstackoverflowとquoraで他の答えを含むすべてのメソッドを試してみましたが、役に立たず、混乱の海に残っていました。この点で任意の助けも（コメントやフィドルや答えのいずれか）私は「金額」列の各行を計算するための出力を持っているJavascript-計算された入力の特定の列の合計（テーブル）

<table> 
    <tr> 
     <th>Description</th> 
     <th>Quantity</th> 
     <th>Rate</th> 
     <th>Amount</th> 
    </tr> 
    <tr> 
     <td>Steel</td> 
     <td><input id="qty1" type="text" oninput="cal1()" /></td> 
     <td><input id="rate1" type="text" oninput="cal1()" /></td> 
     <td><input id="amt1" type="text" /></td> 
    </tr> 
    <tr> 
     <td>Cement</td> 
     <td><input id="qty2" type="text" oninput="cal2()" /></td> 
     <td><input id="rate2" type="text" oninput="cal2()" /></td> 
     <td><input id="amt2" type="text" /></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>TOTAL<input id="tot1" type="text" /></td> 
     //Here I want to know how to get the total sum of amt1(id) and amt2 (id) automatically 
    </tr> 
</table> 

<script type="text/javascript"> 
    function cal1(){ 
     var x1 = document.getElementById('qty1').value; 
     var x2 = document.getElementById('rate1').value; 
     var x3 = document.getElementById('amt1').value; 
     var x4 = x1 * x2; 
     amt1.value = x4; 
    } 
    function cal2(){ 
     var y1 = document.getElementById('qty2').value; 
     var y2 = document.getElementById('rate2').value; 
     var y3 = document.getElementById('amt2').value; 
     var y4 = y1 * y2; 
     amt2.value = y4; 
    } 
    //Here I want to know the sum of id(amt1) and (amt2) 
    </script>

をしてくださいいただければ幸いです。ただし、このリンクに記載されている金額欄の合計を取得できません。http://tinypic.com/view.php?pic=kales0&s=9

出典

2016-06-30 Rookie_Coder

codepen.ioの最初の例をご覧ください。

本質的には、cal1関数とcal2関数は意図したとおりに機能しませんでした。また、amt1またはamt2の値が変更されるたびに、合計を計算する別の関数が必要になる可能性があります。

Javascriptコード：

function cal1() { 
    var x1 = document.getElementById('qty1'); 
    var x2 = document.getElementById('rate1'); 
    var x3 = document.getElementById('amt1'); 

    x3.value = parseInt(x1.value) + parseInt(x2.value); 

    calcTotal(); 
} 

function cal2() { 
    var y1 = document.getElementById('qty2'); 
    var y2 = document.getElementById('rate2'); 
    var y3 = document.getElementById('amt2'); 

    y3.value = parseInt(y1.value) + parseInt(y2.value); 

    calcTotal(); 
} 

function calcTotal() { 
    var amt1 = document.getElementById('amt1'); 
    var amt2 = document.getElementById('amt2'); 
    var tot1 = document.getElementById('tot1'); 

    tot1.value = parseInt(amt1.value) + parseInt(amt2.value); 
}

HTMLコード：

<html> 
    <head> 
    <title>calculation exercise</title> 
    </head> 
    <body> 
    <table> 
    <tr> 
     <th>Description</th> 
     <th>Quantity</th> 
     <th>Rate</th> 
     <th>Amount</th> 
    </tr> 
    <tr> 
     <td>Steel</td> 
     <td><input id="qty1" type="text" oninput="cal1()" /></td> 
     <td><input id="rate1" type="text" oninput="cal1()" /></td> 
     <td><input id="amt1" type="text" /></td> 
    </tr> 
    <tr> 
     <td>Cement</td> 
     <td><input id="qty2" type="text" oninput="cal2()" /></td> 
     <td><input id="rate2" type="text" oninput="cal2()" /></td> 
     <td><input id="amt2" type="text" /></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>TOTAL<input id="tot1" type="text" /></td> 
    </tr> 
</table> 
</body>

出典

2016-06-30 10:12:11 pzelenovic

Javascript-計算された入力の特定の列の合計（テーブル）

答えて

関連する問題