表上帶有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

嗨，嘗試以下代碼。

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

Answer 2

你這樣做是錯的。 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>