Question

我无法为Price * qty和grand total创建逐行计算。

计算仅在第一行完成。其余行不遵循下面的脚本。

我在jsfiddle中创建了一个相同的内容。

或查找以下代码：

HTML

    <div class="form-group">
                        <form name="add_name" id="add_name">
                            <div class="table-responsive">
                                <table class="table table-bordered" id="dynamic_field">
                                    <tr>
                                        <td><input type="text" name="qty[]" placeholder="Enter your Qty" class="form-control qty" /></td>
                                        <td><input type="text" name="amount[]" placeholder="Enter your amount" class="form-control amount" /></td>
                                        <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
                                        <td>Amount<lable class="total"></lable></td>
                                    </tr>
                                </table>
                                <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
                            </div>
                            <div>total <lable class='total1'></lable></div>
                        </form>
                    </div>
                </div>
    <script>
    $(document).ready(function(){
        //adding field
        var i=1;
        $('#add').click(function(){
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="qty[]" placeholder="Enter your qty" class="form-control qty" /></td><td><input type="text" name="amount[]" placeholder="Enter your amount" class="form-control amount" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td><td>Amount<lable class="total"></lable></td></tr>');
        });
    });
        $(document).on('click', '.btn_remove', function(){
            //removing button
            var button_id = $(this).attr("id"); 
            $('#row'+button_id+'').remove();
        });

$(document).on('keyup', '.amount', function(){
        //getting sub total
    var sum =0;var amount = 0;
    $('tr').each(function(){
        var qty = $(this).find('.qty').val()
    //alert(qty);
    var amount = $(this).find('.amount').val()
    //alert(amount);
    sum = qty * amount;
    $(this).find(".total").text (sum); //changed val() to text()
    amount += sum;
    });
    $(this).find('.total1').text(amount); //total sum of amount
});
    </script>

Answer 1

这应该可以解决问题。做了一些改变。

如果你想要修改过的JSFiddle Link，就在这里， https://jsfiddle.net/Lm2qf91d/2/

我对你的keyup功能进行了一些更改。我想这是你想要的结果。

＆＃13;

$(document).ready(function() {
  //adding field
  var i = 1;
  
  $('#add').click(function() {
    i++;
    
    $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="qty[]" placeholder="Enter your qty" class="form-control qty" /></td><td><input type="text" name="amount[]" placeholder="Enter your amount" class="form-control amount" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td><td>Amount<lable class="total"></lable></td></tr>');
    
  });
});

$(document).on('click', '.btn_remove', function() {
  //removing button
  var button_id = $(this).attr("id");
  $('#row' + button_id + '').remove();
});


$(document).on('keyup', '.amount', function() {
  //getting sub total
  var sum = 0;
  var amount = 0;
  var total_sum = 0;
  
  $('tr').each(function() {
    var qty = Number($(this).find('.qty').val());
    // console.log("Quantity: ", qty);
    // alert(qty);
    var amount = Number($(this).find('.amount').val());
    // console.log("Amount: ", amount);
    // alert(amount);
    sum = qty * amount;
    // console.log("SUM: ", sum);
    
    $(this).find(".total").text(sum); //changed val() to text()
    
    // console.log("Type of SUM", typeof(sum));
    // console.log("Type of AMOUNT", typeof(amount));
   
   	total_sum += sum;
    
    // console.log(total_sum);
    
    $('.total1').text(total_sum); //total sum of amount
  });

});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="form-group">
  <form name="add_name" id="add_name">
    <div class="table-responsive">
      <table class="table table-bordered" id="dynamic_field">
        <tr>
          <td><input type="text" name="qty[]" placeholder="Enter your Qty" class="form-control qty" /></td>
          <td><input type="text" name="amount[]" placeholder="Enter your amount" class="form-control amount" /></td>
          <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
          <td>Amount
            <lable class="total"></lable>
          </td>
        </tr>
      </table>
      <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
    </div>
    <div>total
      <lable class='total1'></lable>
    </div>
  </form>
</div>

＆＃13;

无法在Jquery中进行行式计算

1 个答案: