CakePHP 2.0添加html表格行

我試圖將行添加到CakePHP視圖中的html表格，並在必要時增加了id的名稱。用於生成表中的代碼是：CakePHP 2.0添加html表格行

<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：

<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>

在點擊一個鏈接/按鈕我想添加到表中的格式相同，但有一排加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>

我可以使用老式的Javascript得到期望的結果，但我正在尋找一個更好的解決方案。我有jQuery和JSHelper加載。

來源

2012-03-02 DavidMC1982

我的解決方案將是本

$(":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/

來源

2012-03-02 13:51:06 Sotiris

感謝這個，這真是棒極了。我不得不修改$（「：button」），$（「tr：last-child」）和$（「tr：last-child input」），使它們引用特定的元素id（我的頁面更復雜比提供的例子）。 – DavidMC1982 2012-03-05 15:39:46

選中此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。我希望它有幫助。

來源

2012-03-02 13:15:38

CakePHP 2.0添加html表格行

回答

相關問題