Рассчитать таблицу каждой строки однозначно в 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();
});

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>

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