We Keep Coding

If condition is not working for all td values?

i am working with html table, when i check the checkbox i want to compare td values in a every tr, this condition is working fine for 1st tr from 2nd tr the condition is not working.
HTML Code -
<form role="form" name="conForm" id="conForm">
<span id="error" class="text-danger"></span>
<div class="table-responsive">
<table id="myPTable" class="table table-xss table-hover table-bordered">
<thead>
<tr>
<th><input class="checkall" type="checkbox" name="productcheckbox"> All</</th>
<th class="control-label paddingtop">SI No</th>
<th class="control-label paddingtop">Products</th>
<th class="control-label paddingtop">Pending Qty</th>
<th class="control-label paddingtop">Quantity</th>
<th class="control-label paddingtop">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>1</td>
<td>HMIS HMIS HMIS HMIS</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
<td>3000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>2</td>
<td>ERP</td>
<td class="availableQty">1</td>
<td><input type="number" name="select[]" class="enterQty" value="1" style="width:50px;" ></td>
<td>9000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>3</td>
<td>Inventory</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
<td>13000</td>
</tr>
<tr><td><button class="btn-info">Save</button></td></tr>
</tbody>
</table>
</form>
Here is the jquery code -
$(".btn-info").on("click",function(){
var check = $('.checkproduct');
if(check.is(':checked')){
var pending="";
$('#myPTable tr').each(function() {
pending += $(this).find(".availableQty").html();
console.log(pending);
});
var enterqty ="";
$('#myPTable tr').each(function() {
enterqty += $(this).find(".enterQty").val();
console.log(enterqty);
});
if(enterqty > pending){
$("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
}else if(enterqty== 0){
$("#error").html("<p>you have checked the product please enter quantity</p>");
}
else{
var checked = $('.checkproduct:checked').size();
}
the jquery what i wrote is working for only first row, but it need to be work for every work which will be checked.now only you guys can help me, thanks in advance.

I've reformed your code a bit, but i believe this is what you want.
$(".btn-info").on("click", function() {
var pending =0;
var enterqty=0;
$('#myPTable .checkproduct:checked').each(function() {
pending += (+$(this).closest('tr').find(".availableQty").text());
enterqty += (+$(this).closest('tr').find(".enterQty").val());
});
if (enterqty > pending) {
$("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
} else if (enterqty == 0) {
$("#error").html("<p>you have checked the product please enter quantity</p>");
} else {
//var checked = $('.checkproduct:checked').size();
}
});
Demo
$(".btn-info").on("click", function() {
var pending =0;
var enterqty=0;
$('#myPTable .checkproduct:checked').each(function() {
pending += (+$(this).closest('tr').find(".availableQty").text());
enterqty += (+$(this).closest('tr').find(".enterQty").val());
});
if (enterqty > pending) {
$("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
} else if (enterqty == 0) {
$("#error").html("<p>you have checked the product please enter quantity</p>");
} else {
//var checked = $('.checkproduct:checked').size();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="conForm" id="conForm">
<span id="error" class="text-danger"></span>
<div class="table-responsive">
<table id="myPTable" class="table table-xss table-hover table-bordered">
<thead>
<tr>
<th><input class="checkall" type="checkbox" name="productcheckbox"> All</</th>
<th class="control-label paddingtop">SI No</th>
<th class="control-label paddingtop">Products</th>
<th class="control-label paddingtop">Pending Qty</th>
<th class="control-label paddingtop">Quantity</th>
<th class="control-label paddingtop">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>1</td>
<td>HMIS HMIS HMIS HMIS</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
<td>3000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>2</td>
<td>ERP</td>
<td class="availableQty">1</td>
<td><input type="number" name="select[]" class="enterQty" value="1" style="width:50px;"></td>
<td>9000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>3</td>
<td>Inventory</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="12" style="width:50px;"></td>
<td>13000</td>
</tr>
<tr>
<td><button type="button" class="btn-info">Save</button></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>

grab each tr value and make a object with td values

Please check the code bellow. On #btnConfirm button click i have to grab each class="invTr" data-productid="1" then inside each of those tr i have to grab two td text which is- Quantity and Price Per Unit then make a store whole object in var Items = {}. In jquery code comments you will get a sample of object output i wanted to be. Anyone can make output like this from my current tr? The code i already have tried is like jquery bellow but i am stuck on here with error says push of undefined. Any idea to make output like this? Also anyone if can provide JSON object output that also great. Thanks in advance
Currently error i am getting is:
Cannot read property 'push' of undefined
Here is my js fiddle for quick try
HTML:
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Quantity</th>
<th scope="col">Price Per Unit</th>
<th scope="col">Total Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr class="invTr" data-productid="1"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td> <td> 10.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
<tr class="invTr" data-productid="2"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="3"> </td> <td> 20.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
</tbody>
</table>
<button id="btnConfirm">Confirm</button>
Jquery:
//confirm button on click actions
$('#btnConfirm').on('click', function () {
var Items = {};
var invTrClassesObj = {};
var _invTrClasses = $('.invTr');
$.each(_invTrClasses, function (i, invTrClasse) {
invTrClassesObj.ProductId.push(invTrClasse.attr('data-productId'));
});
//console.log(Items); //I want output object like this-> { ProductId:1 { Price:10.00, Quantiry:1 }, ProductId:2 { Price:20.00, Quantiry:3 } }
});

invTrClassesObj.ProductId gives 'push' of undefined becasuse of invTrClassesObj.ProductId is not set yet.
I have added code to get your required JSON object output.
//confirm button on click actions
$('#btnConfirm').on('click', function () {
var x = document.querySelectorAll(".invTr");
//console.log(x);
var Items = {};
var invTrClassesObj = [];
var _invTrClasses = $('.invTr');
$.each(_invTrClasses, function (i, invTrClasse) {
invTrClassesObj.push(
{
'ProductId':invTrClasse.getAttribute('data-productId'),
'Price': $(this).find("td").eq(2).html(),
'Quantiry':$(this).closest('tr').find(".qty").val()
});
});
console.log(invTrClassesObj);
//console.log(Items); //I want output object like this-> { ProductId:1 { Price:10.00, Quantiry:1 }, ProductId:2 { Price:20.00, Quantiry:3 } }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Quantity</th>
<th scope="col">Price Per Unit</th>
<th scope="col">Total Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr class="invTr" data-productid="1"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td> <td> 10.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
<tr class="invTr" data-productid="2"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="3"> </td> <td> 20.00 </td> <td> 20.55 </td> <td>pp</td>
</tr>
</tbody>
</table>
<button id="btnConfirm">Confirm</button>

Add Table Row With Appended Data On Button Click

This is an expansion of a previous question Dynamically append html table cell and the html has been slightly changed.
<div class="docs-main">
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title">
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<select id="e1">
<option value="1">Name 1</option>
<option value="2">Name 2</option>
<option value="3">Name 3</option>
</select>
</td>
<td>
<select id="e2">
<option value="#00ff00">Complete</option>
<option value="#ffff00">In Progress</option>
<option value="#ff0000">Incomplete</option>
</select>
</td>
<td>
<input type="datetime" />
</td>
<td>
<input type="text" />
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Add Row" />
The updated jsfiddle is https://jsfiddle.net/marcwebdude/48ng08tq/13/ . The problem is the append function at lines 47-64 where it is automatically appending a row.
$(function () {
var rowTamplate = $('table.tablesaw tbody tr').eq(0);
var rowContent = [
'<input type="text" value="Name" />',
'<input type="text" value="Title" />',
'<select><option>Name 1</option><option>Name 2</option><option>Name 3</option></select>',
'<select><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select>',
'<input type="datetime" value="Select Date" />',
'<input type="text" />'
];
var rowToadd = rowTamplate.clone();
rowToadd.find('td').each(function (index, element) {
$(element).append(rowContent[index]);
});
rowToadd.insertAfter('table.tablesaw tr:eq(2)');
for (var i = 0; i < 10; i++) {
rowToadd.clone().insertAfter('table.tablesaw tr:eq(2)');
}
I am looking for a solution that when the button is clicked it adds a row with the appended html. Not to automatically add it after a currently existing row. For instance if this table was blank, a button click would add a row with these 6 specified columns and the inputs that coincide with each cell.
The second issue with my existing script is that it's not formatting the appended html, when a row is added manually into the html file, it's formatting correctly, but not if it's appended via jquery.

The updated jsfiddle with revised jquery is https://jsfiddle.net/marcwebdude/48ng08tq/73/ , and so far it's appending contents into the table correctly. Here's the html
<div class="docs-main">
<h2>Workflows</h2>
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="submit" value="Add Row" id="button" />
</div>
and here's the jquery
$(document).ready(function () {
$('#button').on('click', function(){
$('.tablesaw').find('tbody').append($('<tr><td><input type="text" value="Name" /></td><td class="title"><input type="text" value="Title" /></td><td><select class="e1"><option value="0">-- User --</option><option>Name 1</option><option>Name 2</option><option>Name 3</option></select></td><td><select class="e2"><option value="#fff">-- Status --</option><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select></td><td><input type="datetime" value="Select Date" /></td><td><input type="text" /></td></tr>'));
$('.e1').select2();
$('.e2').select2().on('change', function () {
$(this).next()
.find('.select2-selection')
.css({ backgroundColor: this.value });
}).trigger('change');
});
});
This appends the correct data into each cell as well as inherits styles once the row is created.

How to get the id of first <tr> of <tbody> in HTML table using jQuery?

I've following HTML table:
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr id="jumbo">
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
Now I want to get the id of first row from . The id in this case is reb1_1. For getting it I tried below code but it didn't work.
$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table tbody:tr:first').attr('id');
alert(row);
});
});
Thank you.

first go to table tbody then find tr then filter first row like below
var row = $(this).closest('table').find(' tbody tr:first').attr('id');
or can try
var row = $(this).closest('table').find(' tbody tr:eq(0)').attr('id');
reference :first and :eq

Make changes as shown in demo :-
http://jsfiddle.net/avmCX/38/
$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table').find('tbody tr:first').attr('id');
alert(row);
});
});
For more info have a look here :-
http://api.jquery.com/first/

change your function to this:
$(document).ready(function() {
$('.products').click(function () {
var id = $(this).closest("table").find("tbody>tr").first().attr("id");
alert(id);
});
});
this will show you the id.