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

Question

我在这个页面中有两个问题。
问题1
我有一个文本框和一个表格，当文本框的值与表格中产品 ID 列中的值匹配时，数量中的值应增加 1。
当我运行调试器时，我得到了值，但 if 语句不起作用。
问题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，而不适用于所有。

变化

• 返回错误；

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

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

  当 billing-quanity 字段为空时，quantity 变量的值为“NaN”，因此我添加了 ||当 billing-quantity 字段为空时，您看到的 0 给出值 0。

• $("#billing-quanity,#billing-price").bind("keyup change", updateTotal);

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

  <

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

来源

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