Общее значение с 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.

E.g.

$(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); 
}