スパンまたはdivの代わりに入力フィールドを持つ配列を計算する

Question

配列を使ってonblurの簡単な計算をしようとしていますが、発砲していません。私はそれをスパンまたはdivに変更するとうまく動作します。なぜそれが入力フィールドで動作しないのですか？

データベースに値を保存する方が簡単なので、入力フィールドにする必要があります。

<input type="text" class="input-small" name="partnumber[]"> 
    <input type="text" class="input-small" name="partdescription[]" > 
    <input type="text" class="input-small" name="partprice[]" onblur="doCalc(); calculate(); "> 
    <input type="text" class="input-small" name="partquantity[]" onblur="doCalc(); calculate(); "> 
    <input type="text" readonly class="input-small parttotal" name="parttotal[]" > 

計算

function doCalc() { 
    var total = 0; 

    $('tr').each(function() { 
     $(this).find('.parttotal').html($('input:eq(2)', this).val() * $('input:eq(3)', this).val()); 
    }); 
    $('.parttotal').each(function() { 
     total += parseInt($(this).text(),10); 
    }); 
} 

Answer 1

...ここで私は委任イベントを使用しました。まず、私はあなたが動的に任意のより多くの行を追加した場合、それはまだ動作しますここでは、利点をインラインイベントを使用することはありません。

次に、各行にある行ごとに何らかの種類のラッパーがあることを確認します。ここでは単純なDIVを使用しています。 Yousrは、あなたのTRかもしれません。..

ここに見られるように、その後、容易になる残り、私はちょうど価格、数量&合計、およびテストのために行う2行を含めました。この例..

function calc() { 
 
    var h = $(this).closest('div'); 
 
    var qty = h.find('[name="partquantity[]"]'); 
 
    var price = h.find('[name="partprice[]"]'); 
 
    var total = h.find('[name="parttotal[]"]'); 
 
    total.val(qty.val() * price.val()); 
 
} 
 

 
$('body').on('blur', '[name="partprice[]"],[name="partquantity[]"]', calc);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <input type="text" class="input-small" name="partprice[]"> 
 
    <input type="text" class="input-small" name="partquantity[]"> 
 
    <input type="text" readonly class="input-small parttotal" name="parttotal[]" > 
 
</div> 
 

 
<div> 
 
    <input type="text" class="input-small" name="partprice[]"> 
 
    <input type="text" class="input-small" name="partquantity[]"> 
 
    <input type="text" readonly class="input-small parttotal" name="parttotal[]" > 
 
</div>

Answer 2

あなたは、テキストボックスの値を設定するために.html()を使用することはできません。

変更この行：

$(this).find('.parttotal').html($('input:eq(2)', this).val() * $('input:eq(3)', this).val()); 

注

$(this).find('.parttotal').val($('input:eq(2)', this).val() * $('input:eq(3)', this).val()); 

に変更 ('.parttotal').htmlが ('.parttotal').val