JQuery : 폼 입력 요소의 다차원 배열을 반복합니다.

Question

PHP를 사용하면 다차원 배열을 기반으로 폼을 생성합니다. 양식에는 "items [level1] [level2] [price]"및 "items [level1] [level2] [amount]"라는 수의 입력 유형 = "텍스트"필드 쌍이 포함되어 있습니다. 나는 이것을 테이블에 표시한다.

지금, 나는 jQuery를 사용하여 두 가지를 추가 할 :

1. (이 항목에 대한 = 항목 [레벨 1] [레벨 2] [가격] .value * 항목 [레벨 1을 총 가격을 표시하는 여분의 열 ] [level2] [amount] .value)
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에 값을 입력하는 것입니다.

$('.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] 선택 "이름에 포함 된"사용하여 찾아보실 수 있습니다 그들은 항상 1/2 열 경우 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. 
});