添加动态行

Question

当我单击一个按钮时，将添加一行 dynamically.I 添加了多条记录并保存，然后我再添加一行，它会在数据库中存储，它会获得之前插入的行值。例如：首先，我提交了 3 行，然后我又添加了一行。它需要 4 行值并存储到数据库中。提交记录后如何处理这是我的代码，我包含了 table 然后是我使用的脚本。

.table-responsive
          table#itemTable.table.table-striped.table-bordered
            thead
              tr                                
                th Item
                |                 
                th Description
                |                 
                th Quantity
                |                 
                th Price
                |                 
                th Tax Rate
                |                 
                th Subtotal
                |                 
                th Tax
                |                 
                th Total
                |                 
                th       
            tbody#addRow.tbody
              tr.addrow                                
                td
                  input.invoiceId(type='hidden', name='invoiceId', value='#{data.invoice_id}')
                  input(type='hidden', name='item_id', value='4')
                  input.itemName.input-small(type='text', name='itemName[]', value='',disabled)
                  input.input-small(type='hidden', value='#{data.item}',disabled)                 
                td
                  textarea.itemDescription.input-medium(name='itemDescription[]', rows='1', cols='3' disabled)              
                td
                  input.itemQuantity.input-mini(type='text', name='itemQuantity[]' value='', disabled)
                  input.input-mini(type='hidden', value='#{data.quantity}', disabled)                
                td
                  input.itemPrice.input-small(type='text', name='itemPrice[]',value='', disabled)
                  input.input-small(type='hidden',value='#{data.price}', disabled)                
                td
                  select.itemtaxRate.input-small(name='itemtaxRate[]',disabled)
                    option(value='0') None
                    option(value='5.00') 5.00%  
                  select.itemtaxRate.input-small(name='itemtaxRate[]', style='display:none' disabled)           
                td
                  span.subTotal(name='subtotal[]', disabled) 
                    i.fa.fa-inr
                    &nbsp #{data.sub_total}              
                td
                  span.taxRate(name='item_tax_total[]',disabled) 
                    i.fa.fa-inr
                    &nbsp  #{data.tax_amount}               
                td
                  span.netTotal(name='subtotal[]',disabled) 
                    i.fa.fa-inr
                    &nbsp #{data.net_total}                 
                td
                  span(name='remove',disabled) 
                   a(href='#', title='Delete')
                    i.icon-remove      

$('#btn_save_invoice').click(function(){
        var data={};
        data.invoiceId= $('.invoiceId').val();
        data.itemName=$('.itemName').map( function(){return $(this).val(); }).get();
        data.itemDescription=$('.itemDescription').map( function(){return $(this).val(); }).get();
        data.itemQuantity=$('.itemQuantity').map( function(){return $(this).val(); }).get();
        data.itemPrice=$('.itemPrice').map( function(){return $(this).val(); }).get();
        data.itemtaxRate=$('.itemtaxRate').map( function(){return $(this).val(); }).get();
        console.log(data);
        $.ajax({
          url: "/invoice/addItem",
          type: "POST",
          dataType: 'json',
          data: JSON.stringify({ "objectData": data}),
          contentType: "application/json",
          success: function(data) {
            var itemData=data;
            var item =itemData.data.sub_total;
            console.log(item);
            var tax=itemData.data.tax_amount;
            var netTot=itemData.data.net_total;                
            $(".itemName").val(itemData.data.item);
            $(".itemDescription").val(itemData.data.description)
            $(".itemQuantity").val(itemData.data.quantity);
            $(".itemPrice").val(itemData.data.price);
            $(".itemtaxRate").val(itemData.data.tax_rate);
            $(".subTotal").append("<span >"+item+'</span>');
            $(".taxRate").append("<span >"+tax+'</span>');
            $(".netTotal").append("<span >"+netTot+'</span>');           
          },
        });
      });
      $('#add').click(function() {
         console.log("dsc");
         var tradd = $(".tbody .addrow:last").clone();
         console.log(tradd);
         $(tradd).removeClass('.addRow');
         $('.tbody').append(tradd);

      });

Answer 1

Just create one more row with all input as hidden fields.when you click the hidden rows will added
$('table tr.addrow').each(function() {
            var row = {};
            console.log(row);
            $(this).find('input,select,textarea').each(function() {
                if ($(this).is(':checkbox')) {
                    row[$(this).attr('name')] = $(this).is(':checked');                        
                } else {
                    row[$(this).attr('name')] = $(this).val();
                }
            });
            row['item_order'] = item_order;
            item_order++;
            items.push(row);
            console.log("se"+row);
        });

添加动态行

Adding dynamic rows

javascript

jquery

pug