0

私は次のHTMLフォームを持っています

<form action="#" method="post">

 <table>
 <tr>  
  <td><label>Product:<label> <input type="text" /></td>
  <td><label>Price:<label> <input type="text" /></td>
  <td><label>Quantity:<label> <input type="text"/></td>
  <td><label>Amount:<label> <input type="text" name="amount[]"/></td>
 </tr>

 <tr>  
 <td><label>Product:<label> <input type="text" /></td>
 <td><label>Price:<label> <input type="text" /></td>
 <td><label>Quantity:<label> <input type="text"/></td>
 <td><label>Amount:<label> <input type="text" name="amount[]"/></td>
 </tr>

 <!---only two rows have been created by the user -->


 <input type="button" value="Add product" onClick="addProductRow()"/> 
 <input type="submit" value="Submit"/>
 </table>  
</form>

入力フィールドはユーザーによって動的に作成されます（ページに行を追加するためのボタンがあります）。ユーザーが価格と数量を追加する場合、関連する金額フィールドに金額（価格*数量）を表示する必要があります。

私の問題は、JavaScriptまたはjQueryを使用して、各金額フィールドにアクセスして合計金額を挿入するにはどうすればよいかということです。

前もって感謝します。

4

3 に答える 3

0

この場合、私が行うことはparentNode、を含む<tr>に到達するまで使用し、次にそのテーブル行ノードを使用して入力フィールドを検索することです。

于 2012-06-12T14:36:32.540 に答える
0

また、各フィールドにIDを追加し（配列名は同様quantityfields[]にpricefields[]機能します）、標準を使用する必要がありますdocument.getElementById("quantityfields[0]")

またdocument.getElementsByName(name)、トラバースして独自の処理を実行できる配列を返すものも確認しました。追加のIDを使用する必要はありませんが、getElementByIdより一般的だと思います。

于 2012-06-12T14:37:23.273 に答える
0

jQueryを使用する（IDがなく、ページにテーブルが1つしかない場合）

var total;
$("table").find("tr").each(function(index, elem){
    total = total + parseInt($("td:eq(3) input", this).val());
});
于 2012-06-12T14:41:57.823 に答える