How to calculate some field in one row using jquery

Question

I have created some code to calculate some fields in row. But i added some function, so i can add row dynamically using jquery.

This is my source code on my codepen Click here!

this is my function to calculate qtyItem column and price columns

$("tbody").keyup(function() {
    var qtyItem = parseFloat($("#qtyItem").val());
    var price = parseFloat($("#price").val());

    var subTotal = qtyItem * price;
    $("#subTotal").attr("value", subTotal);
  });

the problem is when i try to calculate the 1st row, it's work fine. but the others not affected by the function in my script.

gaetanoM · Answer 1 · 2019-08-16T17:21:49.490

IDs must be unique, so avoid dulicated. For this you can use Template_literals (see the ${nextIdx} in the snippet).

You need to consider NaN values returned by parseFloat

Now, in your price event handler you can change strategy:

get the parent row
find an element looking for it in the children having an id starting with

The new code is now:

$(".addItem").click(function(e) {
    var nextIdx = $("table tbody tr").length + 1;
    var row = `<tr>
    <td><input type="text" class="form-control" name="itemName" id="itemName${nextIdx}"></td>
            <td><input type="number" class="form-control" name="qtyItem" id="qtyItem${nextIdx}"></td>
            <td><input type="number" class="form-control" name="price" id="price${nextIdx}"></td>
            <td><input type="number" class="form-control" name="subTotal" id="subTotal${nextIdx}"  readonly></td>
    </tr>`;
    $("table").append(row);
});

//subTotal count
$("tbody").keyup(function(e) {
    var crow = $(e.target).closest('tr'); // get parent row
    
    // find qtyItem in the children
    var qtyItem = parseFloat(crow.find("[id^=qtyItem]").val()) || 0;
    
    // find price in the children
    var price = parseFloat(crow.find("[id^=price]").val()) || 0;

    var subTotal = qtyItem * price;
    crow.find("[id^=subTotal]").attr("value", subTotal);
});

table,td, th{
    border: 2px, solid, black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form action="#">
    <label for="username">Username</label>
    <input id="username" type="text" placeholder="Input your username"> <br>
    <label for="date">Date</label>
    <input id="date" type="date"> <br>
    <label for="itemSold">Item List</label>
    <table>
        <thead>
        <tr>
            <th>Item</th>
            <th>Qty</th>
            <th>price</th>
            <th>SubTotal</th>
            <th></th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <button type="button" class="addItem">Add Item</button>
</form>

score 0 · Answer 2 · answered Aug 16 '19 at 17:56

You can do it without use id attribute, instead that u can use the name attribute for each row.

$(document).ready(function() {
  //add row on button click
  $(".addItem").click(function() {
    var row = `<tr>
    <td><input type="text" class="form-control" name="itemName"></td>
    <td><input type="number" class="form-control" name="qtyItem"></td>
    <td><input type="number" class="form-control" name="price"></td>
    <td><input type="number" class="form-control" name="subTotal" readonly></td>
    </tr>`;
    $("table").append(row);
  });

  const $tBody = $('tbody')
  //subTotal count
  $tBody.on("keyup", 'input[type="number"]', function() {
    let $parentTr = $(this).closest("tr");
    let qtyItem = parseFloat($parentTr.find('td input[name="qtyItem"]').val());
    let price = parseFloat($parentTr.find('td input[name="price"]').val());
    if (!isNaN(qtyItem) && !isNaN(price)) {
      let subTotal = qtyItem * price;
      $parentTr.find('td input[name="subTotal"]').attr("value", subTotal);
    }
  });
});

table,td, th{
  border: 2px, solid, black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
    <label for="username">Username</label>
    <input type="text" placeholder="Input your username"> <br>
    <label for="date">Date</label>
    <input type="date"> <br>
    <label for="itemSold">Item List</label>
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Qty</th>
                <th>price</th>
                <th>SubTotal</th>
                <th></th>
            </tr>
        </thead>
        <tbody>    
        </tbody>
    </table>
    <button type="button" class="addItem">Add Item</button>
</form>

How to calculate some field in one row using jquery

2 Answers2