动态增加变量的值并将变量相乘答案

【问题标题】：Incrementing value of a variable dynamically and multiplying the variables动态增加变量的值并将变量相乘
【发布时间】：2018-01-18 07:18:34
【问题描述】：

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

/*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>

【问题讨论】：

什么是.equals？您正在混合使用 java 和 javascript。那么ID在文档中必须是唯一的
我现在编辑了请再检查一遍。感谢观看

标签： javascript jquery

【解决方案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 而不是所有的。

变化

return false;

ADD 按钮是一个提交按钮，这意味着当您单击它时，页面会重新加载。通过添加return false，您可以防止页面重新加载。
var quantity = parseInt(document.getElementById('billing-quanity').value) || 0;

当billing-quanity 字段为空时，quantity 变量的值为“NaN”，因此我添加了您所看到的 || 0，当 billing-quantity 字段为空时其值为 0。
$("#billing-quanity,#billing-price").bind("keyup change", updateTotal);

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

希望这对您有所帮助。如果您还想要其他东西，请告诉我。

来源

【讨论】：

【解决方案2】：

试试这个方法。我已将 ID 转换为类，因为 ID 应该是唯一的而不是重复的。还将功能从单击按钮更改为提交表单，这样可以防止页面重新加载。

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

/*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);
	});
});

    
        <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>

【讨论】：