汇总TD onkeyup

Question

I have a code that supposed to sums up all the td in a column. but the problem is, the sum doesnt update automatically onkeyup,

here is the code

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">MASUKKAN SETORAN UNTUK = <b><?php echo $sr; ?></b> ~ <?php echo $flightnum; ?></h4>
    </div>
        <div class="modal-body">
            <table class="display" cellspacing="0" width="100%" id="paymentTable">
                <thead>
                    <th style="width: 1%;">NO</th>
                    <th style="width: 30%;">MATA UANG</th>
                    <th>RATE</th>
                    <th>SETORAN</th>
                    <th>TOTAL IDR</th>
                </thead>
                <tbody>
                <?php
                $i = 1;
                    while ($row = $result->fetch_array()) {
                        echo "<tr>";
                            echo "<td style='width: 1%; '>$row[curr_id]</td>";
                            echo "<td>$row[curr_code] - $row[curr_desc]</td>";
                            echo "<td><input type='hidden' value='$row[conv_rate]' id='convRate$i'>$row[conv_rate]</td>";
                            echo "<td><input type='text' onkeyup='processCurr($i);' id='inputCurr$i'/></td>";
                            echo "<td class='innertd'><div id='calculatedCurr$i' class='calculatedCurr'></div></td>";
                        echo "</tr>";
                        $i++;
                    }
                ?>
                </tbody>
            </table><br/>TOTAL = <div id='totalSumPayment'></div>
            <button class="btn btn-block btn-primary">SUBMIT <b><?php echo $sr; ?></b> ~ <?php echo $flightnum; ?> DATA</button>
        </div>
</div>

<script>
    $('#paymentTable').dataTable();
    function processCurr(param){    
        var inputcurr= $('#inputCurr'+param).val();
        var conversion = $('#convRate'+param).val();
        $('#calculatedCurr'+param).html(inputcurr * conversion);
        calculateSum();
    }

    function calculateSum(){
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".calculatedCurr").each(function(key,value) {
            //add only if the value is number
            if (!isNaN(value) && value.length != 0) {
                sum += parseFloat(value);
                $(this).css("background-color", "#FEFFB0");
            }
            else if (value.length != 0){
                $(this).css("background-color", "blue");
            }
        });

            $("#totalSumPayment").html(sum);
    }
</script>

I dont know whats the problem and everything seems to be alright. please help me,.,

Answer 1

had you try to use type casting, may that's an issue.

Hear we dont have and array so it's not required to get key, value while itratting .each

just simply get inner html like bellow for value

 function processCurr(param){    
    var inputcurr= $('#inputCurr'+param).val();
    var conversion = $('#convRate'+param).val();
    $('#calculatedCurr'+param).html(inputcurr * conversion);
    calculateSum();
}

function calculateSum(){
    var sum = parseFloat(0);
    $(".calculatedCurr").each(function(){
        //Hear we dont have and array so it's not required to get key, value while itratting .each
        // just simply get inner html like bellow as value
        $val=parseFloat($(this).html());
        if (!isNaN($val) && $val.length != 0) {
            sum =sum + parseFloat($val);
            $(this).css("background-color", "#FEFFB0");
        }
        else if ($val.length != 0){
            $(this).css("background-color", "blue");
        }

    });

    $("#totalSumPayment").html(sum);
}