Question

我有这样的表

<table>
  <tr>
    <td><input type="number" class="product-buying-price"></td>
    <td><input type="number" class="product-selling-price"></td>
    <td class="net-profit"></td>
  </tr>
  <tr>
    <td><input type="number" class="product-buying-price"></td>
    <td><input type="number" class="product-selling-price"></td>
    <td class="net-profit"></td>
  </tr>
  <tr>
    <td><input type="number" class="product-buying-price"></td>
    <td><input type="number" class="product-selling-price"></td>
    <td class="net-profit"></td>
  </tr>
  <tr>
    <td><input type="number" class="product-buying-price"></td>
    <td><input type="number" class="product-selling-price"></td>
    <td class="net-profit"></td>
  </tr>
</table>

您可以在此表中看到我有输入值的输入字段。所以有4行，其中有相同的行班级名称。像这样我有更多行，我刚刚在这里使用了4行。现在我希望当我在任何行中输入一些数字时，它应该进行计算并显示在该行的净利润类字段中计算后的总计。所以基本上计算会像这样做

Product selling price - Product buying price = net-profit

那么有人可以告诉我如何为多行执行此操作，计算后同一行中会显示相同的结果吗？

$('body').on('keyup', '.product-buying-price, .product-selling-price', function() {
    var BuyingPrice = $('.product-buying-price').val();
    var SellingPrice = $('.product-selling-price').val();
    var Total = parseInt(SellingPrice)-parseInt(BuyingPrice);
    console.log(Total);
});

我试过这个，但是这个只给了我一行的结果。如何获得多行的结果？

Answer 1

$('.product-buying-price, .product-selling-price').on('blur', function(e) {

    // Get Parent ROW 
    var row = $(this).closest('tr');
    var buying_pr = $('.product-buying-price', row), 
        selling_pr = $('.product-selling-price', row), 
        net_profit = $('.net-profit', row);

    buy_pr = parseFloat(buying_pr.val());
    sell_pr = parseFloat(selling_pr.val());

    if( ! isNaN(buy_pr) && !isNaN(sell_pr) ) {
        net_profit.text( ( sell_pr - buy_pr ).toFixed(2) );
    }
});

DEMO

如果要使用输入创建动态tr，请使用：

$('body').on('blur', '.product-buying-price, .product-selling-price', function(e) {

jquery对行进行计算并在同一行中显示结果

1 个答案: