JQuery: цикл по многомерному массиву элементов ввода формы

Question

С php я генерирую форму на основе многомерного массива. Форма содержит ряд полей типа input = "text", которые называются "items [level1] [level2] [price]" и "items [level1] [level2] [amount]". Я показываю их в таблице.

Теперь я хочу добавить две вещи с помощью JQuery:

1. дополнительный столбец, который отображает общую цену для этого пункта (= пунктов [level1] [level2] [цена] .value * товар [level1 ] [уровень2] [количество] .значение)
2. В нижней строке: общая стоимость всех предметов.

Эти значения должны обновляться при каждом событии изменения одного из указанных текстовых входов.

Я ударил стену последние несколько часов, надеюсь, что кто-то здесь может дать мне несколько указателей.

Вот фрагмент сгенерированного HTML:

<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

Есть несколько способов, вы можете сделать это. Основная идея заключается в том, что вход .classname изменяется, ищите родительскую строку, а затем используйте это для поиска входов в этой строке, чтобы умножить их вместе, и td, чтобы поместить значение. Вы можете посмотреть на них с помощью "имя содержит" [attr*=string] селектор:

$('.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); 
}); 

Демо: http://jsfiddle.net/jtbowden/DJtTs/

Или, если они всегда первый/второй столбец, используйте .eq() или :eq():

$('.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); 
}); 

Демонстрация: 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. 
});