javascript - onkeyup 对每一行的出现和计算

Question

我正在制作一个从数据库中提取的货币表。因此，每种货币都会在 while 循环中创建一个事件，用户必须输入它们的值并在 keyup 上计算它们。问题是，我创建的根据货币计算每个 td 的函数确实工作得很好。转换率仅适用于最后一个TD

这是我的代码，

<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="table table-striped" id="paymentTable">
                <thead>
                    <th>NO</th>
                    <th>MATA UANG</th>
                    <th>RATE</th>
                    <th>SETORAN</th>
                    <th>TOTAL IDR</th>
                </thead>
                <?php
                $i = 1;
                    while ($row = $result->fetch_array()) {
                        echo "<tr>";
                            echo "<td>$row[curr_id]</td>";
                            echo "<td>$row[curr_code] - $row[curr_desc]</td>";
                            echo "<td>$row[conv_rate]</td>";
                            echo "<td><input type='number' onkeyup='processCurr($i);' id='inputCurr$i'/></td>";
                            echo "<td><label id='calculatedCurr$i'></label></td>";
                        echo "</tr>";
                        $i++;
                    }
                ?>
            </table>
        </div>
</div>

和 JavaScript 函数，

<script>
    function processCurr(param){
        var inputcurr= $('#inputCurr'+param).val();
        $('#paymentTable tr').each(function() {
            var convRate = $(this).find("td").eq(2).html();
            $('#calculatedCurr'+param).html(inputcurr * convRate);

        });
    }
</script>

所以每个 TD 中的 convRate 都是相同的，这是我不想要的。每行都应该从数据库中提取自己的 convRate 并调用其函数以使用 onkeyup 计算 IDR 中的总数。

请帮助我，..

这里我附上了截图

Answer 1

你的代码有问题

$('#calculatedCurr'+param).html(inputcurr * convRate);

此处 convRate 的最终值将是最后一个表行值，该值与 inputcurr 相乘得出结果。在每次迭代中， $('#calculatedCurr'+param).html(inputcurr * convRate) 值都会被覆盖。

我假设你想要的是输出为 Total IDR=RATE * SETORAN。你的代码可以优化以获得答案。你还应该分配一些唯一的 id 值来获取你的 convRate 。下面给出了优化的解决方案。

PHP 代码

 while ($row = $result->fetch_array()) {
                        echo "<tr>";
                            echo "<td>$row[curr_id]</td>";
                            echo "<td>$row[curr_code] - $row[curr_desc]</td>";
                            echo "<td><span id='convRate".$i."'>$row[conv_rate]</span></td>";
                            echo "<td><input type='number' onkeyup='processCurr(".$i.");' id='inputCurr".$i."'/></td>";
                            echo "<td><label id='calculatedCurr".$i."'></label></td>";
                        echo "</tr>";
                        $i++;
                    }

Javascript代码

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

    }
</script>