We Keep Coding

Dropdown data-attributes to populate into input fields on dynamically added rows

**This is the code i currently come up with I wanted to populate price and tax files from data- attributes **
<table class="table g-5 gs-0 mb-0 fw-bolder text-gray-700" id="tab_logic">
<!--begin::Table head-->
<thead>
<tr class="border-bottom fs-7 fw-bolder text-gray-700 text-uppercase">
<th class="min-w-50px w-50px">#</th>
<th class="min-w-300px w-475px">Item</th>
<th class="min-w-100px w-100px">QTY</th>
<th class="min-w-100px w-100px">Price</th>
<th class="min-w-100px w-100px">Tax</th>
<th class="min-w-100px w-100px text-end">Total</th>
<th class="min-w-75px w-75px text-end">Action</th>
</tr>
</thead>
<!--end::Table head-->
<!--begin::Table body-->
<tbody>
<tr class="border-bottom border-bottom-dashed" id='addr1'>
<td class="pt-8 text-nowrap rowid" >1</td>
<td class="pe-7">
<select class="form-control form-control-solid itemname" name="itemname[]">
#foreach($items as $item)
<option data-rate="{{$item->item_price }}" data-tax="{{$item->item_tax }}">{{$item->item_name}}</option>
#endforeach
</select>
</td>
<td class="ps-0"><input type="number" class="form-control form-control-solid qty" min="1" name="quantity[]" placeholder="0" /></td>
<td><input type="number" class="form-control form-control-solid price" name="price[]" min="1" placeholder="0.00" /></td>
<td><input type="number" class="form-control form-control-solid text-end tax" name="tax[]" min="0" placeholder="0.00" /></td>
<td><input type="text" class="form-control form-control-solid text-end total" name="total[]" min="1" placeholder="0.00" /></td>
<td class="pt-5 text-end">
<button class="btn btn-sm btn-icon btn-active-color-primary" id="removeRow">Remove</button>
</td>
</tr>
</tbody>
</table>
Add dynamic rows to the table
<script>
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){b=i-1;
$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$(document).on('click', '#removeRow', function () {
if(i>1){
$(this).parent().parent().remove();
i--;
}
calc();
});
</script>
Populate price and tax fields from data attributes
<script>
$(document).ready(function() {
$('tr .itemname').change(function(){
var selected = $('option:selected', this);
// this should now output the correct product name and its rate.
console.log(selected.data('tax'), selected.data('rate') );
// now to add it to rate field within this TR
$(this).parent().parent().find('.price').val( selected.data('rate') );
$(this).parent().parent().find('.tax').val( selected.data('tax') );
});
});
</script>
When select the item first row data populate correctly. However when dynamically add a new row to table and select item its not getting the price and tax values.

I´m not quite sure if this will actually fix it but there is 1 obvious error in your code.
this line
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
appends the tr´s to the table but it should append the tr´s to tbody, so change it to
$('#tab_logic tbody').append('<tr id="addr'+(i+1)+'"></tr>');
i guess your .parent().parent()... works for the first item correctly because it´s in tbody and for the new added not

Using a for loop and function to calculate row total on a table

I think this should be simple but just can't get it right...I am trying to get row total on a table that has incrementing ids like:
<table id="myTable" class="form">
<thead>
<tr>
....
</tr>
</thead>
<tbody>
<tr class="">
<td>
<input type="number" name="quantity" id="item-0-quantity">
</td>
<td>
<input type="number" name="unit_price"id="item-0-unit_price">
</td>
<td>
<td>
<input type="number" name="quantity" id="item-1-quantity">
</td>
<td>
<input type="number" name="unit_price"id="item-1-unit_price">
</td>
...etc
<td>
</tr>
</tbody>
</table>
I initially used the method below for each row's total calculation and it worked, but it's not efficient.
for first row: $('#item-0-quantity, #item-0-unit-price').on('input',function(e){
$('#Total').val(parseFloat($('#item-0-quantity').val()) * parseFloat($('#item-0-
unit-price').val()));
for second row: $('#item-1-quantity, #item-1-unit-price').on('input',function(e){
$('#Total').val(parseFloat($('#item-1-quantity').val()) * parseFloat($('#item-1-
unit-price').val()));
...and so on.
I thought i would better to use a For Loop to iterate and update the value of i based on a rowCounter like:
var rowCounter = $("#myTable tr").length - 1;
for (var i = 0; i <= rowCounter; i++) {
$('#item-'+i+'-quantity, #item-'+i+'-unit-price').on('input',function(e){
$('#Total').val(parseFloat($('#item-'+i+'-quantity').val()) * parseFloat($('#item-'+i+'-unit-price').val()));
});
}
When i input values(quantity and unit-price), i don't get the total.The For Loop doesn't work. Please help,thanks.

Try this:
//loop by name
$("input[name=quantity], input[name=unit_price]").on('input', function () {
var total = 0;
$("input[name=quantity]").each(function (i, e) {
total += $(this).val() * $(e).closest("tr").find("input[name=unit_price]").val();
});
$('#Total').val(total);
});
//loop by table
$("#myTable input[type=number]").on('input', function () {
var total = 0;
$("#myTable tr").each(function (i, e) {
if (document.getElementById("item-" + i + "-quantity") && document.getElementById("item-" + i + "-unit_price")) {//just check if elements exists
total += $(e).find("#item-" + i + "-quantity").val() * $(e).find("#item-" + i + "-unit_price").val();
}
});
$('#Total_by_table_rows').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="form">
<tbody>
<tr class="">
<td>
<input type="number" name="quantity" id="item-0-quantity">
</td>
<td>
<input type="number" name="unit_price"id="item-0-unit_price">
</td>
</tr>
<tr>
<td>
<input type="number" name="quantity" id="item-1-quantity">
</td>
<td>
<input type="number" name="unit_price"id="item-1-unit_price">
</td>
</tr>
</tbody>
</table>
<label> Total:
<input id="Total">
</label>
<label> Total by table rows:
<input id="Total_by_table_rows">
</label>

Because the content you want to sum is identified with the "quantity" and "unit_price" name attributes, you can use this:
$('tr').each(function() {
sum += $('input[name="quantity"]', this).val() * $('input[name="unit_price"]', this).val();
})
The second parameter in the selector (this in our case) give jQuery a context for the search, i.e., each of the rows of the table.
Here you have the snippet:
$('#calculate').click(function() {
var sum = 0;
$('tr').each(function() {
sum += $('input[name="quantity"]', this).val() * $('input[name="unit_price"]', this).val();
})
$('#result').text(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="form">
<tbody>
<tr>
<td>
<input type="number" name="quantity" value="0">
</td>
<td>
<input type="number" name="unit_price" value="0">
</td>
</tr>
<tr>
<td>
<input type="number" name="quantity" value="0">
</td>
<td>
<input type="number" name="unit_price" value="0">
</td>
</tr>
</tbody>
</table>
<input type="button" value="Calculate" id="calculate">
<div>
Result: <span id="result"></span>
</div>

Here you can do like this.
Your code is not working becuase of
var rowCounter = $("#myTable tr").length - 1;
for (var i = 0; i <= rowCounter; i++) {
$('#item-'+i+'-quantity, #item-'+i+'-unit-price').on('input',function(e){
$('#Total').val(parseFloat($('#item-'+i+'-quantity').val()) * parseFloat($('#item-'+i+'-unit-price').val()));
});
}
For Loop was executes before your type in input fields.
And also you have some mistake in code too like here you wrote $('#item-'+i+'-unit-price') but it should be like this $('#item-'+i+'-unit_price')
var quantity = $("input[name='quantity']");
$("input[name='quantity'], input[name='unit_price']").on('input',function(){
var total = 0;
$(quantity).each(function(){
total += parseFloat($(this).val()) * parseFloat($(this).parent().next().find("input[name='unit_price']").val());
});
$("#Total span").html(total);
});
td {
width: 80%;
float: left;
margin-left: 10px;
}
label {
width: 20%;
float: left
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="form">
<tbody>
<tr class="">
<td>
<label>Quantity 1</label>
<input type="number" name="quantity" id="item-0-quantity" />
</td>
<td>
<label>Unit Price 1</label>
<input type="number" name="unit_price"id="item-0-unit_price" />
</td>
<td>
<label>Quantity 1</label>
<input type="number" name="quantity" id="item-1-quantity" />
</td>
<td>
<label>Unit Price 1</label>
<input type="number" name="unit_price"id="item-1-unit_price" />
</td>
<td id="Total">
<label>Total</label>
<span></span>
</td>
</tr>
</tbody>
</table>

How to pick the date using date picker in dynamic table?

My problem is how to use date picker in dynamic rows of the column.
I have used date picker in input text field,but it appears only in first row of the date column.
By selecting the date the date is not selected.
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Bank Name</th>
<th>Chq No</th>
<th>Chq Date</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr >
<td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>
<td>
<input style="width:100px" type="text" id="Product_Code" class="form-control input-xs Product_Code "name="name[]"></td>
<td ><input style="width:100px" type="text" id="Product_Name" class="form-control input-xs" name = "no[]" > </td>
<td><input type="text" class="form-control input-xs datepicker-dates" placeholder="Pick a date…" id="TDate" name="TDate" value="<?php echo date('d/m/Y') ?>"</td>
<td><input style="width:80px" type="text" id="Rate" class="form-control input-xs" value="" name="rate[]"></td>
<td><a href="javascript:void(0);" style="font-size:18px;" id="addMore3" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>
</tr>
</tbody>
</table>
This is table code...........
<script>
$(function(){
$('#addMore3').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
});
$(document).on('click', '.remove3', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
This is javascript code for creating dynamic rows and columns.

try this:
<input type="text" name="TDate" class="form-control" value="" id="datepicker">
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker();
});</script>

Auto duplicate last row in table

I would like to duplicate the last row in a HTML table when the user types in any input inside the last row.
My code only works the first time it is run.
Maybe the table above it is being interfering with it? I also replaced :
if ( $(this).parents("tr").is("tr:last")) {
With
if ($(this).closest("tr").is(":last-child")) {
but this just causes a new row to be made on any input.
Var "t" might be off. I shrunk the size of the table and eyeballed the digits.
Javascript & Jquery
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById("Items").deleteRow(i);
}
function duperow() {
document.getElementById("LastRow").value = (Number($("tr:last td:first").text()) + 1);
var x = document.getElementById('Items');
var new_row = x.rows[1].cloneNode(true);
var len = (Number($("tr:last td:first").text()) + 1);
new_row.cells[0].innerHTML = len;
var inp = [];
for (t = 1; t < 4; t += 1) {
inp[t] = new_row.cells[t].querySelectorAll("input,select")[0];
inp[t].id += len;
inp[t].value = "";
}
inp[3].value = "0.00";
x.appendChild(new_row);
}
$(document).ready(function () {
$("input").keydown(function () {
if ( $(this).parents("tr").is("tr:last")) {
duperow();
}
});
});
HTML
<form id="test" action="submit.php" method="post" accept-charset="ISO-8859-1" enctype="multipart/form-data">
<table width="40%" class="alpha" cellpadding="6px" cellspacing="0" border="0" >
<tr>
<td>
<p>Supplier Name:</p><input name="suplname" type="text" id="suplname" name="suplname" size="10" maxlength="30" required/>
</td>
<td>
<p>Contact:</p><input name="contact" type="text" id="contact" name="contact" size="10" maxlength="40" />
</td>
</tr>
<tr>
<td colspan="2">
<p>Address:</p><input name="address" type="text" id="address" name="address" size="10" maxlength="30" />
</td>
<td>
<input style="display: none;" name="LastRow" type="hidden" id="LastRow" name="LastRow" size="4" maxlength="4" />
</td>
</tr>
</table>
<table class="beta" id="Items" border="1" width="50%" cellpadding="6px" cellspacing="0" border="0" >
<tr>
<th style="display: none;">ID</th>
<th>Acct#</th>
<th>Qty.</th>
<th>Price</th>
<th> </th>
<th> </th>
</tr>
<tr>
<td style="display: none;">1</td>
<td><select name="acct" id="acct" >
<option value=" " > </option>
<option value="1" >Thing</option>
<option value="2" >Thing2</option>
</select></td>
<td><input name="qty" type="number" id="qty" size="2" min="1" maxlength="6" required/></td>
<td><input name="price" type="number" id="price" min="0.00" step="0.01" value="0.00" style="width: 150px;"required/ onchange="total()"></td>
<td><input type="button" id="deleterowbtn" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addrowbtn" value="Add Item" onclick="duperow()"/></td>
</tr>
</table>
</table>
</form>

The issue is that you're binding to the keydown event listener on document.ready, which means that dynamically created input elements don't have anything bound to their keydown event.
You could do this instead:
$(document).ready(function () {
$("table.beta").on("keydown", "input", function (e) {
if ( $(e.target).parents("tr").is("tr:last")) {
duperow();
}
});
});

cannot fill value to <input> using jquery

I have this html
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
html code inside tbody tag is generated by javascript, after generate the code I want to fill the value inside #categories[], #description[] ids
this my javascript code to fill the value
//button simpan item
$('#bSimpanItem').click(function () {
var addnum = $('input#iduser').val();
var addposinfo = $('input#idposinfo').val();
if (addposinfo == '0') {
messageAlert('[ ERROR ]<br>You must completely fill position info field.', 'error');
} else {
var lastrow = ( $('#lastrow').val() ) ? parseInt($('#lastrow').val()) : 1;
var row = parseInt($('#comboqty').val());
var category = $('#combocategory1').val() +'-'+ $('#combocategory2').val();
var description = $('#borrowdesc').val();
addNewRow(row);
console.log(' last row ' + lastrow);
console.log(' total row ' + row);
console.log(' category '+category);
console.log(' description '+description);
for (var i = 1 ; i <= row; i++) {
console.log("index " + i);
$('input#idposinfo').val('');
//fill value "111" and "222" inside <input id="categories[1]"> and <input id="description[1]">
$("input#categories["+lastrow+"]").val("111");
$("input#description["+lastrow+"]").val("222");
lastrow++;
document.getElementById('lastrow').value = lastrow;
console.log("success run bSimpan inside for");
}
console.log("success run bSimpan outside for");
resetForm('formBorrowItem');
$('#formBorrowItem').hide();
//return false;
}
});
but nothing was shown inside the input value

[xxxx] is an attribute selector. If the id has them in the value, you need to escape them as stated in the jQuery documentation.
$("input#categories\\["+lastrow+"\\]");

Try this
$("input#categories\\["+lastrow+"\\]").val("111");
$("input#description\\["+lastrow+"\\]").val("222");
Html code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#bSimpanItem').click(function () {
var iIndex = 0;
$('#tabel-item-borrowed tbody tr').each(function (index) {
iIndex = index + 1
$(this).find("td:eq(0)").find('#categories\\[' + iIndex + '\\]').val('111');
$(this).find("td:eq(1)").find('#description\\[' + iIndex + '\\]').val('22');
});
});
});
</script>
</head>
<body style="width:50%;">
<input type="button" value="bSimpanItem" id="bSimpanItem"/>
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
</body>
</html>

You can access the input inside the loop like this:
$('input[id="categories[' + lastrow + ']"]').val("111");