Click to add Dynamic rows to the existing records using jquery

Question

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());
        })
    })
});

var clone = $("#table tbody tr").last().clone(); $("#table").append(clone); — Arun P Johny
– Arun P Johny, Commented Mar 18, 2016 at 11:11
@Arun, the cloning part is fine now. Its appending the last row. Is there a way, the new appended rows takes the calculations also.? — Sanju Menon
– Sanju Menon, Commented Mar 18, 2016 at 11:18
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
– Sanju Menon, Commented Mar 18, 2016 at 11:26

Ibrahim Khan · Accepted Answer · 2016-03-18 11:46:31Z

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

edited Mar 18, 2016 at 11:46

answered Mar 18, 2016 at 11:18

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sanju Menon Over a year ago

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 Over a year ago

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 Over a year ago

Its working fine now. Is there a way i can put Remove rows to the existing script? Really thank you for your time

Ibrahim Khan Over a year ago

What do you mean? @SanjuMenon

Sanju Menon Over a year ago

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.

Fatih ERALP · Accepted Answer · 2016-03-18 11:35:25Z

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('');

answered Mar 18, 2016 at 11:35

Fatih ERALP

1

1 Comment

Sanju Menon Over a year ago

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.

Collectives™ on Stack Overflow

Click to add Dynamic rows to the existing records using jquery

Fiddle

2 Answers 2

UPDATED FIDDLE

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related