テーブル上のjqueryの合計値

Question

jqueryを使用してテーブルの合計を計算しようとしましたが、実行合計が表示されませんでした。入力値を入力すると合計生き残り回数を表示したいのですが、合計自動集計、何が問題なのですか？

HTML

<table class="table table-condensed">         
    <thead> 
     <tr> 
      <td class="text-left"><strong>Product</strong></td> 
      <td class="text-center"><strong>Value</strong></td> 
     </tr> 
    </thead> 
    <tbody>         
     <tr> 
      <td>Microwave</td> 
      <td><input type="text" id="product_a" name="producta" value="12.000"></td> 
     </tr> 
     <tr> 
      <td>Microwave</td> 
      <td><input type="text" id="product_b" name="producta" value="19.000"></td> 
     </tr> 
     <tr> 
      <td>Microwave</td> 
      <td><input type="text" id="product_c" name="producta" value="15.000"></td> 
     </tr> 
     <tr> 
      <td class="thick-line"><strong>Total</strong></td> 
      <td class="thick-line"><input type="text" id="total" name="total" /></td> 
     </tr>   
    </tbody> 
</table> 

JS

jQuery(document).ready(function(){ 
    var total = ($('#product_a').val() + $('#product_b').val() + $('#product_c').val()) ; 
    $('#total').val(total); 
}); 

Answer 1

あなたは間違ってそれをやっている....のコードを次してみてください。 val()はinput[type=text]に文字列を返し、現在は文字列値を連結しています。私は総ライブを見せたい

私はその後、入力値

を入力すると、あなたは、入力が変更されているとき、あなたが入力としてリスナーを追加する必要があります。これは、keyupイベントで行うことができます。

などです。

$(function() { 
 
    var $aProduct = $('#product_a'), 
 
    $bProduct = $('#product_b'), 
 
    $cProduct = $('#product_c'), 
 
    $total = $('#total'), 
 
    runTotal = function() { 
 
     var a = parseInt($aProduct.val()), 
 
     b = parseInt($bProduct.val()), 
 
     c = parseInt($cProduct.val()); 
 

 
     $total.val(a + b + c); 
 
    }; 
 

 
    $('.inputVal').on('keyup', runTotal); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-condensed"> 
 
    <thead> 
 
    <tr> 
 
     <td class="text-left"><strong>Product</strong> 
 
     </td> 
 
     <td class="text-center"><strong>Value</strong> 
 
     </td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Microwave</td> 
 
     <td> 
 
     <input type="text" id="product_a" name="producta" class="inputVal" value="12.000"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Microwave</td> 
 
     <td> 
 
     <input type="text" id="product_b" name="productb" class="inputVal" value="19.000"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Microwave</td> 
 
     <td> 
 
     <input type="text" id="product_c" name="productc" class="inputVal" value="15.000"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="thick-line"><strong>Total</strong> 
 
     </td> 
 
     <td class="thick-line"> 
 
     <input type="text" id="total" name="total" /> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

こんにちは

jQuery(document).ready(function(){ 

    $("input").on("change",updateTotal); // this will total on change input. 
    updateTotal(); //this will total on start.. 
}); 


function updateTotal() 
{ 
    var total = ($('#product_a').val()*1 + $('#product_b').val()*1 + $('#product_c').val()*1) ; 
    //By multiplying 1 to any string format number it will convert to number datatype. 


    //var total = (Number($('#product_a').val()) + Number($('#product_b').val()) + Number($('#product_c').val())); 
    //You can also uncomment above line to get your desire output. 


    $('#total').val(total); 
}