jQuery 实时计算多行输入

Question

这是我的代码：

<?php
    for($i=1;$i<10;$i++){ 
        echo '<input type="text" class="count value'. $i .'">';
        echo '<input type="text" class="count '. $i .'value">';
        echo '<input type="text" disabled="disabled" id="result'. $i .'"><p>';
    }
        echo '<input type="text" disabled="disabled" id="total"><p>';
    ?>

和jQuery：

$(document).ready(function(){
    $(".count").keyup(function(){
        for (var i = 0; i < 10; i++) {
            var val1 = +$(".value"+ i).val();
            var val2 = +$("."+ i +"value").val();
            $("#result" + i).val(val1*val2);
        }
   });
});

$(document).ready(function(){
    $(".count").keyup(function(){
        for (var i = 0; i < 10; i++) {
            var vala = 0;
            vala += +$("#result"+ i).val();
            }
            $("#total").val(vala);
   });
});

代码的第一部分效果很好。 Return 将两个输入乘以 id=result$i.

我对最后一个有疑问id=total. 它应该 return 所有结果的总和 X 输入 但现在只有 return 最后一次乘法。你知道哪里出了问题吗？

Answer 1

那是因为你在for循环中定义了变量vala为0。应该在 for 循环之外：

$(".count").keyup(function(){
    var vala= 0;
    for (var i = 0; i < 10; i++) {
        vala += $("#result"+ i).val();
    }
    $("#total").val(vala);
 });

Answer 2

您可以通过将相关的 input 元素分组到包含 div 中来简化您的代码，使用 DOM 遍历来检索所需的值，并将两个 for 一起循环。试试这个：

<div class="group">
    <input type="text" class="count valueA" />
    <input type="text" class="count valueB" />
    <input type="text" class="result" disabled="disabled" />
</div>
<!-- repeat the above as needed. Note that the incremental id is no longer needed -->

<p>
    <input type="text" disabled="disabled" id="total" />
</p>

$(document).ready(function(){
    $(".count").keyup(function() {
        var total = 0;
        $('.group').each(function() {
            var $group = $(this);
            var valA = +$group.find('.valueA').val() || 0;
            var valB = +$group.find('.valueB').val() || 0;
            var result = valA + valB;
            total += result;
            $group.find('.result').val(result);
        });
        $("#total").val(total);
   });
});

Example fiddle

jQuery 实时计算多行输入

jQuery live calc multirow input

php

jquery

input

multirow