用jQuery计算表格每一行的唯一值

Question

我在开发一个POS系统。这里我需要计算每个项目的独特总价。我编写了一个onKeyUp函数来计算金额。在单行中它的工作非常完美。如果我修改第二个产品的折扣并添加2，它将影响第一行。

屏幕截图： HTML 代码：

<table class="table table-striped table-hover" id="item_table">
   <thead id="thead">
      <tr class="bg-primary">
         <th>#</th>
         <th>Product Name</th>
         <th>Quantity</th>
         <th>Unit Price</th>
         <th>Discount</th>
         <th>Discount 2</th>
         <th>Amount</th>
         <th><i class="fa fa-close"></i></th>
      </tr>
   </thead>
   <tbody id="item_list">
      <tr>
         <td><?php echo $n; ?></td>
         <td><?php echo $product_name; ?></td>
         <td><input type="number" class="form-control" name="quantity[]" id="quantity" value="1" min="1" step="1"></td>
         <td id="sprice"><?php echo $selling_price; ?></td>
         <td id="discount"><?php echo $discount_rate; ?>%</td>
         <td><input type="text" class="form-control" name="discount2" id="discount2"></td>
         <td id="total"><?php echo number_format($total,2,'.', ''); ?></td>
         <td><span><i class="fa fa-trash"></i></span></td>
      </tr>
   </tbody>
</table>

这里的PHP代码是用于第一次向表中插入行的，它没有问题。对于一个记录它可以运作。

JavaScript:

//Product Row Calculation
function calculateItemPrice() {
    var sprice = $("#item_table #sprice").text();
    var quantity = $("#item_table #item_list #quantity").val();
    var discount = $("#item_table #discount").text().slice(0, -1);
    var discount2 = $("#item_table #item_list #discount2").val();

    $('tr').each(function() {
        var totalDiscount = ((sprice * quantity) * discount / 100);
        var price = ((((sprice * quantity) - totalDiscount)) - discount2);
        var total = parseFloat(price).toFixed(2);

        $("#total").html(total);
    });
}

$("#item_table").on("keyup", "#quantity", function() {
    calculateItemPrice();
});

$("#item_table").on("keyup", "#discount2", function() {
    calculateItemPrice();
});

- Coder LK

---

你在代码中多次使用了id，但是id是唯一的，第二次使用无法生效。 - DEEPAK

欢迎来到stackoverflow :) 如果您的问题不是关于php的，我更喜欢HTML表格的渲染DOM版本。这很奇怪！您在这里隐藏了一个php循环吗？ - Bilel

是的，有一个用于从数据库获取数据的PHP循环。我将其隐藏了起来。我的onkeyup函数对数量和discount2字段都能正常工作。问题是如果我添加第二个产品，无法独立计算每一行。 - Coder LK

Answer 1

使用 class 代替 id。您还可以通过使用此方法计算总金额。

$(function(){ 
    $('body').on("keyup change", ".quantity, .discount2", function() {
        var tr        = $(this).parent().parent();

        var sprice    = tr.find(".sprice").text();
        var quantity  = tr.find(".quantity").val();
        var discount  = tr.find(".discount").text().slice(0, -1);
        var discount2 = tr.find(".discount2").val();

        // calculate total 
        var totalDiscount = ((sprice * quantity) * discount / 100);
        var price = ((((sprice * quantity) - totalDiscount)) - discount2);
        var total = parseFloat(price).toFixed(2);
        tr.find(".total").html(total);

        // calculate grand total
        var grandTotal = 0.00;
        $('tr > .total').each(function(i, v){
            grandTotal = (parseFloat(grandTotal)+parseFloat($(this).text())).toFixed(2);
        });

        console.log('Grand Total: ', grandTotal);
    }); 
});

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

<table class="table table-striped table-hover" id="item_table" border="1">
   <thead id="thead">
      <tr class="bg-primary">
         <th>#</th>
         <th>Product Name</th>
         <th>Quantity</th>
         <th>Unit Price</th>
         <th>Discount</th>
         <th>Discount 2</th>
         <th>Amount</th>
         <th><i class="fa fa-close"></i></th>
      </tr>
   </thead>
   <tbody id="item_list">
      <tr>
         <td>1</td>
         <td>Test 1</td>
         <td><input type="number" class="form-control quantity" name="quantity[]" value="1" min="1" step="1"></td>
         <td class="sprice">10</td>
         <td class="discount">2%</td>
         <td><input type="text" class="form-control discount2" name="discount2"></td>
         <td class="total">10</td>
         <td><span><i class="fa fa-trash"></i></span></td>
      </tr>
      <tr>
         <td>2</td>
         <td>Test 2</td>
         <td><input type="number" class="form-control quantity" name="quantity[]" value="1" min="1" step="1"></td>
         <td class="sprice">20</td>
         <td class="discount">5%</td>
         <td><input type="text" class="form-control discount2" name="discount2"></td>
         <td class="total">20</td>
         <td><span><i class="fa fa-trash"></i></span></td>
      </tr>
   </tbody>
</table>

- souravmsh

Answer 2

可以试试这样：

//Product Row Calculation
    function calculateItemPrice(sprice,quantity,discount,discount2){
        var totalDiscount = ((sprice * quantity) * discount/100);
        var price = ((((sprice * quantity) - totalDiscount))- discount2);
        var total = parseFloat(price).toFixed(2);

        //alert("Hi");
        return total;
    }

    $("#item_table").on("keyup","#discount2 , #quantity", function() {
        var sprice = $(this).closest('tr').find("#sprice").text();
        var quantity = $(this).closest('tr').find("#quantity").val();
        var discount = $(this).closest('tr').find("#discount").text().slice(0,-1);
        var discount2 = $(this).closest('tr').find("#discount2").val();

        total2 = calculateItemPrice(sprice,quantity,discount,discount2);
        $(this).closest('tr').find('#total').html(total2);
        //alert(discount2);
    });

- Aashif Ahamed