BBO001 Ответов: 1

Как суммировать динамические созданные строки в jquery

Поэтому я пытаюсь создать форму, в которой я могу добавить новую строку и ключ в значение в сумме, тогда общая сумма будет суммироваться и сразу же показывать значение. Функция keyup и функция add row работают, но она не суммирует значения строки append.

Что я уже пробовал:

HTML
<table>
<tbody id="calculation">
<td><input class="underline-input" type="number" name="item" /></td>
<td><input class="underline-input amount" type="number" id="amount" name="amount"/></td>
</tbody>
<tr>
<th colspan="2">TOTAL RM</th>
<td><input class="underline-input" type="number" id="total" name="total" /></td>
</tr>
</table>


Скрипт
  $(document).ready(function(){

        $('.amount').keyup(function(){

        var sum=0;
 
        $('.amount').each(function(){
        sum+=Number($(this).val());
        });

        $('#total').val(sum);

        });
}

    function addRow() {    
        var template = '';
        template += '<tr>';
        template += '<td><input class="underline-input" type="number" name="item" />
        template += '<td><input class="underline-input amount" type="number" id="amount" name="amount" /></td>';
        template += '</tr>';
    
        $("#calculation").append(template);

        });

1 Ответов

Рейтинг:
2

F-ES Sitecore

Во-первых, в вашей функции addRow есть опечатка, вам не хватает конечной кавычки и точки с запятой

function addRow() {
    var template = '';
    template += '<tr>';
    template += '<td><input class="underline-input" type="number" name="item" />'; // <----
    template += '<td><input class="underline-input amount" type="number" id="amount" name="amount" /></td>';
    template += '</tr>';

    $("#calculation").append(template);
}


Другая проблема заключается в том, что вы прикрепляете событие keyup ко всем элементам с классом "сумма", однако оно прикрепляется только к элементам, существующим при вызове, т. е. При загрузке DOM, поэтому любые элементы "сумма", которые вы добавляете после, не будут иметь прикрепленного события. Вместо этого вы можете использовать метод "ВКЛ." для прикрепления событий, который также будет работать для элементов, добавленных позже.

$(document).ready(function () {

    $('#calculation').on("keyup", ".amount", function () {

        var sum = 0;

        $('.amount').each(function () {
            sum += Number($(this).val());
        });

        $('#total').val(sum);

    });
});

function addRow() {
    var template = '';
    template += '<tr>';
    template += '<td><input class="underline-input" type="number" name="item" />';
    template += '<td><input class="underline-input amount" type="number" id="amount" name="amount" /></td>';
    template += '</tr>';

    $("#calculation").append(template);
}

BBO001

Большое вам спасибо!