Question

我想动态添加一行（一行有3列），我想计算2列，总和将在左侧显示一列。当我添加多行时，每列计算将以不同的方式显示，总和将显示为

4*2=8`
4*3=12
Total=20

HTML代码

// add row
var x = 1;
$('#addButton').click(function(e) {
  e.preventDefault();
  if (x < 10) {
    x++;
    $('#addRow').append('<div class="row"><input type="text" class="com_quantity"><input type="text" class="com_per"><input type="text" class="com_total"></div>');
  } else {
    alert('Only 10 row alloted');
  }
});

// remove row
$('#addRow').on("click", "#remove_field", function(e) {
  e.preventDefault();
  $(this).parent('div').remove();
  x--;    
});

// calculation section
/*---- Calcucation section--*/
$('.com_quantity').keyup(function() {
  var quantity = $(this).val();
  var com_per = $('.com_per').val();
  commission(quantity, com_per, 0);
});
$('.com_per').keyup(function() {
  var com_per = $(this).val();
  var quantity = $('.com_quantity').val();
  commission(quantity, com_per, 0);
})

function commission(quantity, com_per, total_com) {
  var quantity = quantity;
  var com_per = com_per;
  var total_com = total_com;
  total = quantity * com_per;
}

<div class="x_content">
  <div class="" id="addRow">
    <!-- here will add the row-->
  </div>
</div>
<div>
  <input type="button" id="addButton" value="Add New">
</div>

我的方面结果

当我添加行时，乘法结果将单独显示，并且总和将显示在下面。如果我删除/减少或添加行，结果将改变。请帮助我任何人。

Answer 1

根据您提供的信息以及我所能理解的，这就是我想出的。

希望这是您所需要的。

// add row
			var x = 1;

			$('#addButton').on('click', function(e) {

				e.preventDefault();

				if(x < 10) {

					x++; 

					$('#addRow').append('<div class="row"><input type="text" class="com_quantity"><input type="text" class="com_per"><input type="text" class="com_total"></div>');
				}
				else{

					alert('Only 10 row alloted');
				}	

			});

			// remove row
			$('#addRow').on("click","#remove_field", function(e) {

				e.preventDefault(); 
				$(this).parent('div').remove(); 
				x--;
        
        // when a row is removed recalculate sum of total commissions
				sumTotalCommissions();

			});

			$('#addRow').on('input', '.com_quantity', function() {

				var quantity = $(this).val();
				var com_per = $(this).siblings('.com_per').val() || 0;

				var commission = quantity * com_per;

				if (commission) {

					$(this).siblings('.com_total').val(commission);
          
          sumTotalCommissions();
				}

			});

			$('#addRow').on('input', '.com_per', function() {

				var quantity = $(this).val();
				var com_per = $(this).siblings('.com_quantity').val() || 0;

				var commission = quantity * com_per;

				if (commission) {

					$(this).siblings('.com_total').val(commission);
          
          sumTotalCommissions();
				}
			});
      
      
      var sumTotalCommissions = function() {

				var total_commissions = 0;

				$('#addRow .com_total').each(function(index, com_total) {

					total_commissions += parseInt($(com_total).val());
				});

				$('#totalCommissions').html(total_commissions);
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
	<head></head>
	<body>
		
		<div class="x_content">
			<div class="" id="addRow">
				<!-- here will add the row-->
			</div>
      
      <div style="margin-left: 350px;">
				Total commissions : <span id="totalCommissions"></span>
			</div>
      
		</div>
		<div>
			<input type="button" id="addButton" value="Add New">
		</div>
	</body>
</html>

如何计算动态添加的行输入的总值

1 个答案: