单击以使用 jquery 将动态行添加到现有记录答案

【问题标题】：Click to add Dynamic rows to the existing records using jquery单击以使用 jquery 将动态行添加到现有记录
【发布时间】：2016-03-18 11:05:51
【问题描述】：

如何向 jQuery 中的现有记录添加动态行。我在 php 中得到了一些记录。在底部有一个“添加更多行”，它克隆了最后一行。触发器上的行中发生了一些现有计算，例如更改选择会进行一些计算，这个新创建的动态行应该适应这些计算。在这种情况下，当我单击添加新行时，它会添加完整的表。我只需要添加最后一行。此外，新创建的行不进行任何计算。有人指导我吗？我已将脚本上传到小提琴。

Fiddle

这是我用来创建动态行的脚本：

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

【问题讨论】：

div不能放在tbody中
var clone = $("#table tbody tr").last().clone(); $("#table").append(clone);
@Arun，克隆部分现在很好。它附加了最后一行。有没有办法，新追加的行也进行计算。？
我猜它不会增加数组值 [2]。有没有办法，新附加的行采用新的数组值[4]..[5]等等...？
使用事件委托stackoverflow.com/questions/203198/…

标签： php jquery html mysql

【解决方案1】：

div 不能放在tbody 中。

使用以下js

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

UPDATE对动态生成的元素使用委托事件，如下所示。

$('#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

【讨论】：

它现在很完美，它附加了最后一行。有没有办法，新的附加行也从顶部进行计算。这意味着如果我更改任何货币，就会进行一些计算。但是当我更改货币时，新创建的行没有进行计算
我猜它不会增加数组值 [2]。有没有办法，新附加的行采用新的数组值[4]..[5]等等...？
它现在工作正常。有没有办法可以将删除行放到现有脚本中？非常感谢您的宝贵时间
什么意思？ @SanjuMenon
您正在添加一些行。如果我需要删除任何特定的行？在创建的每个新行中，如果我单击删除该特定行，我需要一个 X 标记。

【解决方案2】：

是的。阿齐姆是对的。如果您想清除新行中的值。你可以试试这个。

    var clone = $("#table tr:last").clone();
    $("#table").append(clone).find('tr:last input').val('');

【讨论】：

是的，这很好，但问题是这个新创建的行没有进行计算。您可以尝试从下拉列表中更改任何货币值。对于旧数据，新创建的行也应该从 jquery 中进行计算。