javascript - 总结 TD onkeyup

Question

我有一个代码应该总结一列中的所有 td。但问题是，总和不会在 keyup 时自动更新，

这是代码

<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>

我不知道出了什么问题，一切似乎都很好。请帮助我,.,

Answer 1

如果您尝试使用类型转换，这可能是个问题。

听说我们没有数组，所以在访问 .each 时不需要获取键值

只是简单地获取内部 html，就像下面的值一样

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