CakePHP 2.0 html 테이블 행 추가

Question

CakePHP 뷰에서 html 테이블에 행을 추가하고 필요에 따라 ID의/이름을 증가 시키려고합니다. 테이블을 생성하는 데 사용되는 코드 : I는 동일한 포맷이지만 함께 테이블에 추가 행하고자 링크/버튼을 클릭했을

<tbody> 
    <tr> 
    <td><div class="input text"><input name="data[OrderDetail][0][product_code]" maxlength="100" type="text"/></div></td> 
    <td><div class="input text"><input name="data[OrderDetail][0][product_name]" maxlength="255" type="text"/></div></td> 
    <td><div class="input number"><input name="data[OrderDetail][0][product_qty]" step="any" type="number"/></div></td> 
    <td><div class="input number"><input name="data[OrderDetail][0][product_price]" step="any" maxlength="24" type="number"/></div></td> 
    </tr> 
</tbody> 

:

<tbody> 
    <tr> 
    <td><?php echo $this->Form->input('OrderDetail.0.product_code'); ?></td> 
    <td><?php echo $this->Form->input('OrderDetail.0.product_name'); ?></td> 
    <td><?php echo $this->Form->input('OrderDetail.0.product_qty'); ?></td> 
    <td><?php echo $this->Form->input('OrderDetail.0.product_price'); ?></td> 
    </tr> 
</tbody> 

CakePHP의는 다음과 같은 HTML을 출력 같은 1 씩 증가 배열 :

<tbody> 
    <tr> 
    <td><div class="input text"><input name="data[OrderDetail][0][product_code]" maxlength="100" type="text"/></div></td> 
    <td><div class="input text"><input name="data[OrderDetail][0][product_name]" maxlength="255" type="text"/></div></td> 
    <td><div class="input number"><input name="data[OrderDetail][0][product_qty]" step="any" type="number"/></div></td> 
    <td><div class="input number"><input name="data[OrderDetail][0][product_price]" step="any" maxlength="24" type="number"/></div></td> 
    </tr> 
    <tr> 
    <td><div class="input text"><input name="data[OrderDetail][1][product_code]" maxlength="100" type="text"/></div></td> 
    <td><div class="input text"><input name="data[OrderDetail][1][product_name]" maxlength="255" type="text"/></div></td> 
    <td><div class="input number"><input name="data[OrderDetail][1][product_qty]" step="any" type="number"/></div></td> 
    <td><div class="input number"><input name="data[OrderDetail][1][product_price]" step="any" maxlength="24" type="number"/></div></td> 
    </tr> 
</tbody> 

나는 평범한 구식 자바 스크립트를 사용하여 원하는 결과를 얻을 수 있습니다,하지만 난 더 우아한 해결책을 찾고 있어요. jQuery 및 JSHelper가로드되었습니다.

Answer 1

내 솔루션이

$(":button").click(function() { 
    $("tr:last-child").clone().appendTo('tbody'); //clone the last row 
    $("tr:last-child input").each(function() { //for each input in the last row, do the following 
     var nameAttr = $(this).attr('name'); //get the whole value of attribute 'name' 
     var newIndex = parseInt(nameAttr.replace(/[^\d]/g, ''))+1; //get the digit and add one 
     $(this).attr('name',nameAttr.replace(/\d/,newIndex)); //replace the old digit with new 

    }); 
}); 

데모 것 : 이것에 대한http://jsfiddle.net/CKxLh/

Answer 2

확인이 jQuery 코드 :

$('#add_element').click(function(){ 
    var next_id = $('table tr').length; 
    var clone_tr = $('table tr:first').clone(); 
    clone_tr.find('input').val(''); 

    clone_tr.find('input:eq(0)').attr('name', 'data[OrderDetail][' + next_id + '][product_code]'); 
    clone_tr.find('input:eq(1)').attr('name', 'data[OrderDetail][' + next_id + '][product_name]'); 
    clone_tr.find('input:eq(2)').attr('name', 'data[OrderDetail][' + next_id + '][product_qty]'); 
    clone_tr.find('input:eq(3)').attr('name', 'data[OrderDetail][' + next_id + '][product_price]'); 

    $('table tbody').append(clone_tr); 

    return false; 
}); 

난 당신이 ID에 대한이 너무 속성을 할 필요가있을 것이다 생각합니다.

확인하십시오. jsFiddle. 나는 그것이 도움이되기를 바랍니다.