从中间删除行后,动态表格不计算小计

时间:2019-02-05 18:06:51

标签: jquery html laravel-5.4

在这里我需要帮助,每当我从中间删除一行而不是从动态创建的最后一行删除那一行时,小计将无法计算

我使用jquery创建了一个动态表单,它可以完美运行,数量和价格以及小计和最终总计都可以完美运行。即使当我删除一行时,它也可以正确地重新计算,但是当我从顶部删除一行(可以说是五行中的第三行)时,它将很好地重新计算,但是当我尝试添加新行时,它不会计算出小计和最终总计,直到我删除每一行并从头开始。请我帮忙

     <h3>List here</h3>

           <table id="add-me" class="table table-bordered">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Sub-Total</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="remove_me">
                        <td class="col-md-7">
                            <input type="text" id="description1" 
          name="description[]" class="form-control">
                        </td>
                        <td class="col-md-1">

                            <input type="text" value="0" id="quantity1" 
         name="quantity[]" class="form-control number_only" autofocus="" >
                        </td>
                        <td class="col-md-2">
                            <input type="text" value="0" id="price1" 
         name="selling_price[]" class="form-control price number_only">
                        </td>
                        <td class="col-md-2">
                            <input type="number" value="0.0" class="form- 
       control" id="sub_total1" name="sub-total" readonly>

                        </td>
                        <td class="col-md-2">
                        <button id="add-form" type="button" class="btn 
       btn-default" style="font-weight: 600;font-size: 20px;">+</button>

                        </td>

                    </tr>                            

                </tbody>
            </table>
            <div class="col-md-3 form-group" style="float: right;">
                <input type="number" value="0.0" class="form-control 
      final_total_amount" id="final_total_amount" name="total" readonly >
                <input type="hidden" name="total_item" id="total_item" 
       value="1" />
            </div>





     $(document).ready(function(){
    var final_total_amt = $('#final_total_amt').text();
     var count = 1;

  $(document).on('click', '#add-form', function(){
    count++;
    $('#total_item').val(count);

    $('#add-me').append('<tr id="row_id_'+count+'"><td class="col-md-7"> 
    <input type="text" id="description'+count+'" name="description[]" 
   class="form-control"></td><td class="col-md-1"><input type="text" 
   value="0" id="quantity'+count+'" name="quantity[]" class="form-control 
    number_only" autofocus="" ></td><td class="col-md-2"><input 
   type="text" 
  value="0" id="price'+count+'" name="selling_price[]" class="form-control 
   price number_only"></td><td class="col-md-2"><input type="text" 
   value="0.0" class="form-control" id="sub_total'+count+'" name="sub- 
   total" 
   readonly></td><td class="col-md-2"><button type="button" name="remove" 
   id="'+count+'" class="btn btn-danger remove">X</button></td></tr> ');

});

$(document).on('click', '.remove', function(){
      var row_id = $(this).attr("id");
      var total_item_amount = $('#sub_total'+row_id).val();
      var final_amount = $('#final_total_amount').text();
      var result_amount = parseFloat(final_amount) - 
      parseFloat(total_item_amount);
      $('#final_total_amount').text(result_amount);
      $('#row_id_'+row_id).remove();
      count--;
      $('#final_total_amount').val(result_amount);

      //cal_final_total();
      //$('#sub_total').val(result_amount);
    });

    function cal_final_total(count)
    {
      var final_item_total = 0;
      for(j=1; j<=count; j++)
      {
        var quantity = 0;
        var price = 0;
        var actual_amount = 0;
        var item_total = 0;
        quantity = $('#quantity'+j).val();
        if(quantity > 0)
        {
          price = $('#price'+j).val();
          if(price > 0)
          {
            actual_amount = parseFloat(quantity) * parseFloat(price);
            $('#sub_total'+j).val(actual_amount);

            item_total = parseFloat(actual_amount) + 
           parseFloat(final_item_total);
            $('#final_total_amount').val(item_total);

            //final_item_total = parseFloat(item_total) + 
          parseFloat(actual_amount);
            //$('#final_total_amount'+j).val(final_item_total);

            final_item_total = parseFloat(item_total);
            $('#final_total_amount'+j).val(final_item_total);


          }
     }
    }
    $('#final_total_amount').text(final_item_total);
     }

    $(document).on('blur', '.price', function(){
      cal_final_total(count);
    });

    //$(document).on('blur', '.final_total_amount', function(){
     // cal_final_total(count);
   // });

    });

我希望它能正常工作,以便每当我删除并重新添加一行时,它都能正常工作

0 个答案:

没有答案