複数inputに入力された数字の合計を表示する

Ads

Result

jQuery

$("#myTable").on('input', '.txtCal', function () {
       var calculated_total_sum = 0;
     
       $("#myTable .txtCal").each(function () {
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
              $("#total_sum_value").html(calculated_total_sum);
       });

複数inputに入力された数値の合算を出します。
簡易的な見積もりとかデータを扱う時に使えそうでしょうか

html

<table id="myTable">
<tr>   <th width="100">品名 </th>
    <th>金額</th>
</tr>
<tr>
    <td><span>なし:</span></td>
    <td><input type="text" class='txtCal' />円</td>
</tr>    
<tr>
    <td><span>りんご :</span></td>
    <td><input type="text" class='txtCal' />円</td>
</tr>  
<tr>
    <td><span>パイン :</span></td>
    <td><input type="text" class='txtCal' />円</td>
</tr>  
<tr>
    <td><span>ぶどう :</span></td>
    <td><input type="text" class='txtCal' />円</td>
</tr>  
<tr>
    <td><span>みかん :</span></td>
    <td><input type="text" class='txtCal' />円</td>
</tr>
<tr>
    <td><span><b>合計 :</b></span></td>
    <td><b><span id="total_sum_value"></span>円</b></td>
</tr>
</table>

via

jQuery: Calculate Sum Of all Textbox Values In a Table Column