I have a table and a button that generates a new row for the table.
Qty | Product name | Price | Subtotal |
---|---|---|---|
1 | Product A | $50 | $50 |
Here's my jquery code for the add new row button
$("#add").click(function() {
$("#transactionData > tbody").append($('<tr>
<td><input type="number" class="qty" id="qty" value="1" aria-label="Search" class="form-control" style="width: 100px"></td>' +
'<td><select class="form-control custom-select" id="productList" name="productList" aria-label="Default select example">' +
'<?php foreach ($productList as $prod) : ?>' +
'<option value="<?= $prod['productName'] ?>"><?= $prod['productName'] ?> </option>' +
'<?php endforeach; ?>' +
'</select></td>
<td class="price" id="price">20000000</td>' +
'<td class="subTotal" id="subTotal">$64.50</td>' +
'<td class="project-actions text-left">' +
'<a class="btn btn-danger btn-sm" id="deleteButton"><i class="fas fa-minus"></i></a>'
));
});
The qty cell is an input that has jquery code that will set value of Subtotal
$('.qty').on('input', function() {
var price = $(this).closest('tr').find('.price').text();
var subTotal = this.value * price;
$(this).closest('tr').find('.subTotal').html(subTotal);
});
I already use class selector and $(this).closest('tr') but it wont work on rows that i generated with the button.