JQuery：フォーム入力要素の多次元配列をループする

Question

PHPを使用して、多次元配列に基づいたフォームを生成します。このフォームには、「アイテム[レベル1] [レベル2] [価格]」および「アイテム[レベル1] [レベル2] [金額]」という数の入力タイプ=「テキスト」フィールドペアが含まれています。私はこれらをテーブルに表示します。

さて、私はjqueryのを使用して2つのものを追加したい：

1. この項目（=項目は[レベル1] [レベル2] [価格] .VALUE *項目[レベル1の合計価格を表示する余分な列] [レベル2] [金額]。値）
2. 最下行：すべての商品の合計金額。

これらの値は、上記のテキストインプットのいずれかの変更イベントごとに更新される必要があります。

私はここ数時間、壁にぶつかってきました。ここの誰かが私に指針を与えることを願っています。あなたがそれを行うことができ、いくつかの方法があります

<form name="formname"> 
<table name="tablename"> 
    <tr> 
     <td><input type="text" class="classname" name="items[1][2][amount]" /></td> 
     <td><input type="text" class="classname" name="items[1][2][price]" /></td> 
     <td>Here I want to display amount*price</td> 
    </tr> 
    <tr> 
     <td><input type="text" class="classname" name="items[1][8][amount]" /></td> 
     <td><input type="text" class="classname" name="items[1][8][price]" /></td> 
     <td>Here I want to display amount*price</td> 
    </tr> 
    <tr> 
     <td><input type="text" class="classname" name="items[3][4][amount]" /></td> 
     <td><input type="text" class="classname" name="items[3][4][price]" /></td> 
     <td>Here I want to display amount*price</td> 
    </tr> 
    ...more rows like above... 
    <tr>Some more formelements that have nothing to do with the problem</tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>Here I want to display the sum of all amount*price</td> 
    </tr> 
</table> 
</form> 

Answer 1

：

は、ここで生成されたHTMLの抜粋です。基本的な考え方は、.classnameの入力が変更されたときに、親の行を探して、それを使って、その行の入力を一緒に乗算し、tdの値を入力します。 .eq()または:eq()を使用し、http://jsfiddle.net/jtbowden/DJtTs/

それとも、彼らは常に第一/第二列ある場合：

$('.classname').on('change', function() { 
    var row = $(this).closest('tr'); 
    var total = row.find('input:eq(0)').val() * row.find('input:eq(1)').val(); 

    row.find('td:last').text(total); 
}); 

$('.classname').on('change', function() { 
    var row = $(this).closest('tr'); 
    var total = row.find('[name*=amount]').val() * row.find('[name*=price]').val(); 

    row.find('td:last').text(total); 
}); 

デモ：あなたは[attr*=string]セレクターを "名前が含まれている" を使用して、それらを探すことができます

デモ：http://jsfiddle.net/jtbowden/DJtTs/1/

EDIT MARCO：

$(".classname").live('change', function(e) { 
    //replaced on with live so the function will stick. 
    var row = $(this).closest('tr'); 
    var total = row.find('[name*=amount]').val() * row.find('[name*=price]').val(); 
    row.find('[id="totalitemprice"]').text("\u20ac "+total.toFixed(2)); 
    //added eurosign and rounded to 2 decimals 

    //Start computing total value 
    var totaltotal = parseFloat(0); 
    $.each($('[id="totalitemprice"]'), function(key, value) { 
     //Loop across all totalitemprices 
     totaltotal += parseFloat(value.firstChild.data.replace(/\u20ac /g,'')); 
     //Find out what's in the cell, strip the eurosign, parse it to Float and add it to the total 
    }); 

    $("#totalprice").text("\u20ac "+totaltotal.toFixed(2)); 
    //Finally, write the total price to the approprioate cell. 
});