複数の行が動的に生成される場合、jQueryで2つの変数を追加する方法はありますか？

Question

私は、複数の行が生成され、各行の内側にモーダルとフォームが含まれているダイナミックテーブルを作成しました。すべてのモーダルフォームは一意のIDを持ちます。今は、無効になっているテキストフィールドの中に2つの変数の結果を表示したいと思います。だから、どうしたらいいですか？どうか私を助けてください。

$(document).ready(function(){ 
    var a = parseInt($('#unit_rate'+this.id).val()); 
    var b = parseInt($('#tax'+this.id).val()); 
    var total = a+b; 
    $('#price').val(total); 
}); 

<input type="text" name="unit_rate" id="unit_rate<?php echo $product_id; ?>" value=""> 
<input type="text" name="tax" id="tax<?php echo $product_id; ?>" value=""> 
<input type="text" name="price" id="price<?php echo $product_id; ?>" value=""> 

は、ページがロードされたときに、彼らは DOMの一部ではない

Answer 1

あなたの行が動的に生成されるありがとうございました。特定の行を使用document.getElementById選択するには：私はあなたが（これから値を取得したいすべての要素を単一のクラスにはなりません割り当てます

var id=1; 
 
$("body").append('<input type="text" name="unit_rate" id="unit_rate1" value=""><input type="text" name="tax" id="tax1" value=""><input type="text" name="price" id="price" value="">'); 
 

 
$("button").on("click",function(){ 
 
    var a = parseInt($(document.getElementById('unit_rate'+id)).val()); 
 
    var b = parseInt($(document.getElementById('tax'+id)).val()); 
 
    var total = a+b; 
 
    console.log(total); 
 
    $(document.getElementById('price')).val(total); 
 
    });

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

Answer 2

：ここ

することは簡単なデモです動的に生成される）。 $（ "。my_class_here"）のすべての要素を選択して、$ .each（）で選択を繰り返し、値を読み込んで追加することができます。あなたの例に続き

：心の中で

$(document).ready(function(){ 
    var total=0; 
    var elements = $(".test"); 
    $.each(elements, function(key, value) { 
     total += parseInt(value.value, 10); 
    }); 
    $('#price').val(total); 
}); 

<input type="text" name="unit_rate" id="unit_rate1" class="test" value="20"><br> 
<input type="text" name="tax" id="tax2" class="test" value="50"><br> 
<input type="text" name="price" id="price" value=""> 

ベアは、jQueryのHTMLオブジェクトを返していることを、私たちは番号を取得するために.valueの代わり.val()を使用する必要があります。また、テキスト入力を使用しているため、フィールドから文字列の代わりに実際の番号を取得するには、parseInt()を使用する必要があります。