jqueryを使用したコントロール配列間の計算

Question

2つのダイナミックコントロール配列を作成しています。

<input type=text name=quantity[]> 
<input type=text name=price[]> 

私はこれらの2つの入力を掛け合わせて結果を表示したいと考えています。私はフロントエンドでjavascriptやjQueryを使ってやりたい

これを行う最良の方法は何でしょうか？

EDIT @Zeus 私は質問で述べたように、コードがこの

<input type="text" name="quantity[]"> <input type="text" name="price[]"> 
<input type="text" name="quantity[]"> <input type="text" name="price[]"> 
<input type="text" name="quantity[]"> <input type="text" name="price[]"> 

のようになりますので、それが今、私は2番目に最初のテキストフィールドと価格に数量を入力しますコントロールの配列であります1。各行について、これらのフィールドを掛けてその隣に結果を表示する必要があります。

質問をより詳しく説明します。

Answer 1

あなたはこのようにそれを行うことができます。

$("button").click(function() { 
 
    $("#calc tr").each(function(i) { 
 
    var result = $(this).find("input[name*='quantity[]']").val() * $(this).find("input[name*='price[]']").val(); 
 
    $(this).children("td:nth-child(3)").html(result); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<table id="calc"> 
 
    <tr> 
 
    <th>Quantity</th> 
 
    <th>Price</th> 
 
    <th>Result</th> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="quantity[]"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="price[]"> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="quantity[]"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="price[]"> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="quantity[]"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="price[]"> 
 
    </td> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 
<button>Click me after entering values</button>

それをテストするためのコードを実行します。

これは、コードを編集する必要がある場合の例です。