如何汇总动态表格输入表单的所有价格并在新输入类型中附加值？答案

【问题标题】：How to Sum all price of dynamic table input form and append value in new input type?如何汇总动态表格输入表单的所有价格并在新输入类型中附加值？
【发布时间】：2020-12-21 19:01:32
【问题描述】：

这是我的动态表格输入表单。

<table id="calculate">
<tr>
  <th>Price</th>
</tr>

 <tbody data-role="dynamic-fields">
   <tr class="form-inline">
  <td>
     <div class="input-group">
      <input type="text" name="price[]" class="form-control">
      </div>
   </td>
   <td>
      <div class="input-group">
       <button class="btn btn-primary btn-sm" data-role="add">
         Add
       </button>
     </div>
    </td>
   </tr>
 </tbody>
</table>

<input type="text" name="total_price" id="total_price">

这是当我点击按钮时在表格中追加新表单的 jquery

 $(document).on(
        'click',
        '[data-role="dynamic-fields"] > .form-inline [data-role="add"]',
        function(e) {
            e.preventDefault();
            var container = $(this).closest('[data-role="dynamic-fields"]');
            new_field_group = container.children().filter('.form-inline:first-child').clone();
            new_field_group.find('input').each(function(){
                $(this).val('');
            });
            container.append(new_field_group);
           }
    );

现在我想通过点击添加按钮输入多个价格，所有价格都应该总计并附加到 total_price

$(document).on('change paste keyup', " input[name='price[]']", function(){
   updatetotalprice($(this));
});

function updatetotalamount(selector) {
  $parent = selector.parent('.input-group').parent('td').parent('tr');    [...$parent.querySelectorAll("tr")].forEach(row => {
   $("[name=amount[]]").val()= total;
    $("#total_price").val(total.toFixed(2));
 
})
  
}

【问题讨论】：

标签： jquery

【解决方案1】：

使用下面的脚本代码：

<script>

    $(document).on(
        'click',
        '[data-role="dynamic-fields"] > .form-inline [data-role="add"]',
        function(e) {
            e.preventDefault();
            var container = $(this).closest('[data-role="dynamic-fields"]');
            new_field_group = container.children().filter('.form-inline:first-child').clone();
            new_field_group.find('input').each(function(){
                $(this).val('');
            });
            container.append(new_field_group);
        }
    );
    function updatetotalamount(selector) {
        let $parent = selector.closest('tbody'),
            total = 0;
        [...$parent[0].querySelectorAll("tr")].forEach(row => {
            console.log(($(row).find('input[name="price[]"]')).val());
            if(($(row).find('input[name="price[]"]')).val() !== ''){
                total += parseInt( ($(row).find('input[name="price[]"]')).val() );
                $("#total_price").val(total);
            }
        })
    }

    $(document).on('change paste keyup', " input[name='price[]']", function(){
        updatetotalamount($(this));
    });
</script>

【讨论】：

太棒了！！1 非常感谢。