CakePHP 2.0 добавить строку таблицы HTML

Question

Я пытаюсь добавить строки в HTML-таблицы в представлении CakePHP и при необходимости увеличить идентификаторы / имена.Код, используемый для создания таблицы:

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

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 . Надеюсь, это поможет.