动态增加变量的值并乘以变量

Question

我在此页面中有两个问题。
问题1
我有文本框和表格，当文本框的值与表格中产品ID列的值匹配时，数量中的值应增加1。 当我运行调试器时，我得到的值，但if语句不起作用。
问题2
数量的值应与价格的值相乘，并将结果显示在总列中。乘法适用于第1行，但第2行和后续行不起作用。为此我尝试了ID和CLASS 注意
所有行都是从后端动态生成的。
在此先感谢..

/*Increase quanity in billing table*/
$(document).ready(function(){
        $("#add").click(function () {
    var product1 = parseInt(document.getElementById('billing-product-id').value); 
    var product2 = parseInt(document.getElementById('billing-product-id1').value); 
    var quanity = parseInt(document.getElementById('billing-quanity').value);
    
    if(product1 === product2 ){
        quanity = quanity + 1;
            
    } 
});

});

/*billing table total*/
$("#billing-quanity,#billing-price").keyup(function () {
    $('#billing-total').val($('#billing-quanity').val() * $('#billing-price').val());
     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Billing Table -->
        <div class="container-fluid billing-section">
        <table class="table table-striped" id="billing-table">
            
            <form action="" method="post">
            <legend>Billing</legend>
            <thead>
            <tr>
                <th>Product ID</th>
                <th><input type="text" name="billing-product-id" id="billing-product-id" class="form-control" required></th>
                <th><input type="submit" class="btn btn-primary" value="ADD" id="add"></th>
            </tr>
            </thead>
            </form>
	<thead>
            <tr>
                <th>S.no</th>
                <th>Product ID</th>
                <th>Product Name</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        
        </tbody> 
        </table>
        </div>

Answer 1

这是您需要的代码：

/*Increase quanity in billing table*/
$(document).ready(function(){
        $("#add").click(function () {
    var product1 = parseInt(document.getElementById('billing-product-id').value); 
    var product2 = parseInt(document.getElementById('billing-product-id1').value); 
    var quantity = parseInt(document.getElementById('billing-quanity').value) || 0;
    
    if(product1 == product2 ){
      quantity = quantity + 1;
      
      $('#billing-quanity').val(quantity);
      updateTotal();
            
    } 
    return false;
});

});

function updateTotal() {
    $('#billing-total').val($('#billing-quanity').val() * $('#billing-price').val());
}

/*billing table total*/
$("#billing-quanity,#billing-price").bind("keyup change", updateTotal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Billing Table -->
        <div class="container-fluid billing-section">
        <table class="table table-striped" id="billing-table">
            
            <form action="" method="post">
            <legend>Billing</legend>
            <thead>
            <tr>
                <th>Product ID</th>
                <th><input type="text" name="billing-product-id" id="billing-product-id" class="form-control" required></th>
                <th><input type="submit" class="btn btn-primary" value="ADD" id="add"></th>
            </tr>
            </thead>
            </form>
	<thead>
            <tr>
                <th>S.no</th>
                <th>Product ID</th>
                <th>Product Name</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        
        </tbody> 
        </table>
        </div>

当然它只适用于第一个相同的ID而不适用于所有ID。

<强>更改

• return false;

  ADD按钮是一个提交按钮，这意味着当您单击它时页面会重新加载。添加return false即可阻止页面重新加载。

• var quantity = parseInt(document.getElementById('billing-quanity').value) || 0;

  当billing-quanity字段为空时，quantity var的值为'NaN'，因此我添加了|| 0，您看到的billing-quantity在$("#billing-quanity,#billing-price").bind("keyup change", updateTotal);时给出了值0字段是空的。

• updateTotal

  使用上面的行，总数不仅会在用户在数量文本框中写入某些内容时发生变化，而且还会在使用向上和向下箭头更改该值时发生变化。我还将if(product1 == product2 )作为一个函数，以便在我以编程方式（在cURL内）更改数量时调用它。

希望这有用。如果你想要别的东西，请告诉我。

<强>来源

1. jQuery 'if .change() or .keyup()'
2. How to turn NaN from parseInt into 0 for an empty string?

Answer 2

试试这种方式。我已将ID转换为类，因为ID应该是唯一的，不会重复。还提交了从点击按钮到提交表单的功能，这样就可以防止页面重新加载。

演示： https://codepen.io/kastriotcunaku/pen/QMgLNx?editors=1010

＆＃13;

＆＃13;

/*Increase quanity in billing table*/
$(document).ready(function() {
	$('#add').submit(function( event ) {
		event.preventDefault();
		$('.product').each(function() {
			var input = $('#billing-product-id').val();
			var id = $(this).find('.billing-product-id').val();
			var quantity = $(this).find('.billing-quanity');
			var quantityValue = quantity.val();
			var price = $(this).find('.billing-price').val();
			var total = $(this).find('.billing-total');
			
			if(input === id) {
				quantity.val(++quantityValue);
				total.val(quantityValue * price)
			}
		});
	});
	
	// Change Total on manual Quantity change
	$('.billing-quanity').change(function() {
		var quantity = $(this).val();
		var price = $(this).parent().parent().find('.billing-price').val();
		$(this).parent().parent().find('.billing-total').val(quantity * price);
	});
});

    
    
    

＆＃13;

    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Billing Table -->
<div class="container-fluid billing-section">
 <table class="table table-striped" id="billing-table">

  <form action="" method="post" id="add">
   <legend>Billing</legend>
   <thead>
    <tr>
     <th>Product ID</th>
     <th><input type="text" name="billing-product-id" id="billing-product-id" class="form-control" required></th>
     <th><input type="submit" class="btn btn-primary" value="ADD"></th>
    </tr>
   </thead>
  </form>
  <thead>
   <tr>
    <th>S.no</th>
    <th>Product ID</th>
    <th>Product Name</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Total</th>
    <th></th>
   </tr>
  </thead>
  <tbody>
   <tr class="product">
    <td><input type="number" class="form-control billing-sno" disabled value="1"></td>
    <td><input type="number" class="form-control billing-product-id" disabled value="123"></td>
    <td><input type="text" class="form-control billing-product-name" disabled value="shoes"></td>
    <td><input type="number" class="form-control billing-quanity" value="0"></td>
    <td><input type="number" class="form-control billing-price" disabled value="100"></td>
    <td><input type="number" class="form-control billing-total" disabled value=""></td>
    <td><input type="button" class="btn btn-primary row-delete" value="Delete"></td>
   </tr>
   <tr class="product">
    <td><input type="number" class="form-control billing-sno" disabled value="1"></td>
    <td><input type="number" class="form-control billing-product-id" disabled value="123"></td>
    <td><input type="text" class="form-control billing-product-name" disabled value="shoes"></td>
    <td><input type="number" class="form-control billing-quanity" value="0"></td>
    <td><input type="number" class="form-control billing-price" disabled value="100"></td>
    <td><input type="number" class="form-control billing-total" disabled value=""></td>
    <td><input type="button" class="btn btn-primary row-delete" value="Delete"></td>
   </tr>
   <tr class="product">
    <td><input type="number" class="form-control billing-sno" disabled value="1"></td>
    <td><input type="number" class="form-control billing-product-id" disabled value="123"></td>
    <td><input type="text" class="form-control billing-product-name" disabled value="shoes"></td>
    <td><input type="number" class="form-control billing-quanity" value="0"></td>
    <td><input type="number" class="form-control billing-price" disabled value="100"></td>
    <td><input type="number" class="form-control billing-total" disabled value=""></td>
    <td><input type="button" class="btn btn-primary row-delete" value="Delete"></td>
   </tr>

  </tbody>
 </table>
</div>

＆＃13;

＆＃13;

＆＃13;