2

How can I add a dynamic row to the existing records in jQuery. I am getting some records in php. At the bottom there is an 'Add More Rows', which clones the last row. There are some existing calculations happening in the rows on a trigger like changing the selection will do some calculations, this newly created dynamic rows should adapt those calculations. Here in this case when I click Add New Rows, its adding the complete table. I just need the last row to append. Also the new created row is not taking any calculations. Anyone to guide me plsss? I have uploaded the script to the fiddle.

Fiddle

This is the script iam using to create dynamic rows:

$(window).load(function () {
    jQuery(document).ready(function ($) {
        $("#add_more").on('click', function (e) {
            e.preventDefault();
            var clone = $(".clone_row").eq(0).clone();
            $("#cart1").append(clone);
        });
        $("#submit").on('click', function (e) {
            e.preventDefault();
            alert($("#cart1").serialize());
        })
    })
});
Community
  • 1
  • 1
Sanju Menon
  • 747
  • 1
  • 10
  • 24

2 Answers2

1

div can't be placed inside tbody.

Use following js

$("#add_more").on('click', function (e) {
    e.preventDefault();
    var clone = $("#table tbody tr:last").clone();
    $("#table tbody").append(clone);
});

UPDATE use delegated event for dynamically generated element like following.

$('#cart1').on('change', '.currency-selec', function (event, processing) {
    console.log("A row changed", processing, event);
    var row = $(this).closest('tr');
    var table = row.closest('table');
    var currency = $(this).val();
    if (processing) {
        // Calculate me
        calculateRowTotals($(row));
    } else {

        // Calculate other if not processing yet
        table.find("tr").each(function () {
            $(this).find("select").val(currency).trigger("change", 1);
        });
    }
});


$('#cart1').on('change', '#table :input', function () {
    var $tr = $(this).closest('tr'),
      $totInr = $tr.find('[name="total_inr[]"]'),
      unitprice = +$tr.find('[name="unitprice[]"]').val() || 0,
      qty = +$tr.find('[name="item_quantity_sup[]"]').val() || 0,
      $currency = $tr.find('[name="currency_change[]"] option:selected'),
      currency = $currency.val(),
      inr = $('#inrvalue').val();

    var total = unitprice * qty;
    $tr.find('[name="total[]"]').val(total);
})

UPDATED FIDDLE

Ibrahim Khan
  • 20,616
  • 7
  • 42
  • 55
  • Its perfect now, its appending the last row. Is there a way, the new appended rows takes the calculations also.from the top. Which means if i change any currency there is some calculations taking place. But when i change the currency, the newly created rows is not taking the calculations – Sanju Menon Mar 18 '16 at 11:20
  • I guess its not incrementing the array values [2]. is there a way, the newly appended rows takes the new array value[4]..[5] etc...? – Sanju Menon Mar 18 '16 at 11:26
  • Its working fine now. Is there a way i can put Remove rows to the existing script? Really thank you for your time – Sanju Menon Mar 18 '16 at 12:04
  • What do you mean? @SanjuMenon – Ibrahim Khan Mar 18 '16 at 12:46
  • You are adding some Rows. In case if i need to delete any particular Rows? In each New Row created, i need a X mark, if i click that delete that particular row. – Sanju Menon Mar 19 '16 at 03:54
0

Yes. Azim is right. And if you want to clear values in new row. You can try this.

    var clone = $("#table tr:last").clone();
    $("#table").append(clone).find('tr:last input').val('');
Fatih ERALP
  • 1
  • Yeah that's fine, but the problem is this newly created rows is not taking the calculations. U can try to change any currency values from the dropdown. With the old data the newly created rows should also take the calculations from jquery. – Sanju Menon Mar 18 '16 at 11:40