Javascript 在jquery中唯一地计算表中的每一行

我在一个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>

试着这样做：

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

---

使用

class

而不是

id

。你也可以用这个来计算总数

$（函数（）{
$（'body'）。在（'keyup change'，.quantity，.discount2'，函数（）上{
var tr=$（this.parent（）.parent（）；
var sprice=tr.find（“.sprice”）.text（）；
var quantity=tr.find（“.quantity”）.val（）；
var折扣=tr.find（“.discount”）.text（）.slice（0，-1）；
var discount2=tr.find（“.discount2”）.val（）；
//计算总数
var总折扣=（（价格*数量）*折扣/100）；
风险值价格=（（价格*数量）-总折扣）-折扣2）；
var总计=浮动（价格）.toFixed（2）；
tr.find（“.total”）.html（总计）；
//合计
var grandTotal=0.00；
$（'tr>.total'）。每个（函数（i，v）{
grandTotal=（parseFloat（grandTotal）+parseFloat（$（this）.text（））.toFixed（2）；
});
console.log（'grandTotal:'，grandTotal）；
}); 
});

#
品名
量
单价
优惠
折扣2
数量
1.
测试1
10
2%
10
2.
测试2
20
5%
20
您在整个代码中都在使用id，id是唯一的，不会在第二次使用欢迎使用stackoverflow:）如果您的问题不是关于php，我更喜欢HTML表的呈现DOM版本。真奇怪！是的，有一个php循环用于从数据库获取数据。我把它藏起来了。My onkeyup函数在quantity和discount2字段中都能正常工作。问题是，若我添加第二个乘积，则无法唯一地计算每一行
//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);
    });