We Keep Coding

in the table add a row at the top js

when I click the button, I need to add a row in the table above the current
I found the search code but it adds a line at the bottom tell me where to dig to redo it
http://jsfiddle.net/Guruprasad_Rao/Lg0v4yyz/
<table id="myTable" class="order-list">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="price1" />
</td>
<td><input type="button" id="ibtnDel" value="Delete"></td>
<td colspan="5" style="text-align: left;">
<input type="button" class="addRow" id="addrow" value="Add Row" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="">Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>

You can use the insertBefore() instead of insertAfter()
The insertBefore() method inserts HTML elements before the selected elements.
$(document).ready(function () {
var counter = 0;
$(document).on("click",".addRow", function () {
console.log('clicked');
var counter = $('#myTable tr').length - 2;
$(document).on("click",".dele", function () {
counter = -1
});
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="name' + counter + '"/></td>';
cols += '<td><input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="button" id="ibtnDel" class="dele" value="Delete"></td>';
cols += '<td colspan="5" style="text-align: left;"><input type="button" class="addRow" value="Add Row" /></td>';
newRow.append(cols);
newRow.insertBefore($(this).parents().closest('tr'));
//$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("change", 'input[name^="price"]', function (event) {
calculateRow($(this).closest("tr"));
calculateGrandTotal();
});
$("table.order-list").on("click", ".dele", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="order-list">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="price1" />
</td>
<td><input type="button" id="ibtnDel" value="Delete"></td>
<td colspan="5" style="text-align: left;">
<input type="button" class="addRow" id="addrow" value="Add Row" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="">Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>

You can do something like this in your JS script:
// Replace the following
// newRow.insertAfter($(this).parents().closest('tr'));
// with
newRow.insertBefore($(this).parents('tr'));

Get the values of input field of each row of html table

I have a html table. Each row has input field with hidden borders. When I press a button then it should give me all the values of input field of each table row
without using id and class, if it is possible.
Html:
<div class="row" style="z-index:0;">
<div class="col-md-12">
<table id="detailTable" class="table table-bordered table-sm">
<thead class="thead-light" style="text-align:center">
<tr>
<th style="width:130px;">Date</th>
<th style="width:300px;">Particulars</th>
<th style="width:10px;">C.B.F</th>
<th style="width:180px;">Dr. Amount</th>
<th style="width:180px;">Cr. Amount</th>
<th style="width:200px;">Balance</th>
<th style="width:10px;">Opt</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='11-12-2018'/> </td>
<td> <input type='text' value='Cash'/> </td>
<td> <input type='text' value=''/> </td>
<td> <input type='text' value='20000'/> </td>
<td> <input type='text' value='15000'/> </td>
<td> <input type='text' value='-5000'/> </td>
<td> <input type='button' value='Delete'/> </td>
</tr>
</tbody>
</table>
</div>
<button class='btn btn-success'>Show</div>
</div>
JavaScript I tried
var rowsInTable = $("#detailTable tr").length;
rowsInTable--;
row.parentNode.removeChild(row);
for(i=1;i<=rowsInTable;i++)
{
console.log(document.getElementById("detailTable").rows[i].innerHTML);
}

Since JQuery is not tagged, this is how I would do it in Javascript only:
var tableRows = document.getElementById("detailTable").rows
for (i = 1; i < tableRows.length; i++) {
var myrow = tableRows[i];
for (j = 0; j < myrow.cells.length; j++) {
var mytd = myrow.cells[j];
console.log(mytd.children[0].value);
}
}
Here is the JSFiddle demo
You can further fine-tune it to get your formatted output.
P.S: Check your console for the output.

Here you go!
$('button').on('click', function() {
$('#detailTable > tbody').find('tr').each(function() {
console.log($(this).find('input'));
});
});

Here I am using $.map to get the values
Also use jQuery to delete the row
$(function() {
$(".btn-success").on("click", function() {
var values = $("#detailTable tbody input[type=text]").map(function() {
return this.value;
}).get();
alert(values);
});
$("[type=button][value=Delete]").on("click", function() {
$(this).closest("tr").remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="z-index:0;">
<div class="col-md-12">
<table id="detailTable" class="table table-bordered table-sm">
<thead class="thead-light" style="text-align:center">
<tr>
<th style="width:130px;">Date</th>
<th style="width:300px;">Particulars</th>
<th style="width:10px;">C.B.F</th>
<th style="width:180px;">Dr. Amount</th>
<th style="width:180px;">Cr. Amount</th>
<th style="width:200px;">Balance</th>
<th style="width:10px;">Opt</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='11-12-2018' /> </td>
<td> <input type='text' value='Cash' /> </td>
<td> <input type='text' value='' /> </td>
<td> <input type='text' value='20000' /> </td>
<td> <input type='text' value='15000' /> </td>
<td> <input type='text' value='-5000' /> </td>
<td> <input type='button' value='Delete' /> </td>
</tbody>
</table>
</div>
<button type="button" class='btn btn-success'>Show</button>
</div>

why unable to set value to input using javascript

i have this html code, display a table
<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="catinfo[1]" type="text" name="catinfo1" size="40">
<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="catinfo[1]" type="text" name="catinfo1" size="40">
<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>
i want to fill value inside <input id="catinfo[1]" type="text" name="catinfo1" size="40"> using javascript. this is my code
and this javascript to fill value from php function into html input
$("input#idposinfo").val('');
$("input#categories\\[" + lastrow + "\\]").val(category);
$("input#description\\[" + lastrow + "\\]").val(description);
//succes fill the value inside catinfo
//$("input#catinfo\\[" + lastrow +"\\]" ).val(category);
$.post("get_category_info/" + $('#combocategory1').val() + "/" + $('#combocategory2').val(), {}, function (obj) {
console.log("get obj value");
console.log(obj); //value in obj is int 25
$("input#catinfo\\["+lastrow+"\\]").val(obj);
console.log("success get obj value");
});
lastrow++;
$("input#lastrow").val(lastrow);
inside $.post, the $("input#catinfo\\[" + lastrow +"\\]" ).val(category); did not work
how do i fill value from $.post ?

Because POST call is asynchronous so success function get executed later but due to closure in success function you get updated lastrow value which causing the issue:
try setting another local variable which didn't get updated:
var rowToUpdate = lastrow;
$.post("get_category_info/" + $('#combocategory1').val() + "/" + $('#combocategory2').val(), {}, function (obj) {
$("input#catinfo\\["+rowToUpdate+"\\]").val(obj);
console.log("success get obj value");
});

take value data & Delete row table with javascript

I have 3 problems with this javascript.
User cant add more item if already limit.
Example max item 3, and value item is ab,bc,cd, how I can take value if using javascript (after all done user will be press submit then all data from table will be post (i cant take data from javascript))?
what I want build is like this : Example 2 item
|Total Item | Name Item | Delete |
| 1 | ABC | DELETE(BUTTON) |
| 2 | CDE | DELETE(BUTTON) |
This is html code, example max item is 6
<table border="0">
<tr>
<td>
Title
</td>
<td>
:
</td>
<td>
<input type="text" name="title" value="" placeholder="Input Title">
</td>
</tr>
<tr>
<td>
Show Item
</td>
<td>
:
</td>
<td>
<select name="max" id="maxitem">
<?php
for($i=1; $i<=6; $i++)
{
echo "<option value=".$i.">".$i." Item</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>
Product
</td>
<td>
:
</td>
<td>
<input type="text" name="product" id="product" value="" placeholder="Add Product">
</td>
<td>
<input type="button" id="ADD" value="Add Item">
</td>
</tr>
</table>
<table border="1" id="tblname">
<thead>
<tr>
<td>
Total Item
</td>
<td>
Name Item
</td>
<td>
DELETE
</td>
<tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<input type="submit" value="SUBMIT">
and this is javascript code :
$(document).ready(function(){
var item = 1;
$('#ADD').click(function(){
var maxitem = parseInt($("#maxitem").val()); //from max item in html
if($('#product').val()){ // check input product
if( item <= maxitem )
{
$('#tblname tbody').append($("#tblname tbody tr:last").clone());
$('#tblname tbody tr:last td:first').val(item);
$('#tblname tbody tr:last td:first').html($('#product').val());
$('#tblname tbody tr:last td:first').append("<input type='button' class='DEL' value='DELETE'>");
var item +=1;
}
else
{
alert ("Max Limit !!!");
}
}else{alert('Enter Text');}
});
// for delete row
$('body').on('click', 'input.DEL', function() {
$(this).parents('tr').remove();
});
});

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
var item = 1;
$('#ADD').click(function(){
var maxitem = parseInt($("#maxitem").val(), 10); //from max item in html
var iCount = 0;
if($('#product').val()){ // check input product
if( item <= maxitem )
{
iCount = $('#tblname tbody tr').length + 1;
szTr = "<tr><td>";
szTr = szTr + iCount + "</td>";
szTr = szTr + "<td>" +$('#product').val() +"</td>";
szTr = szTr + "<td><input type='button' class='DEL' value='DELETE'></td>";
szTr = szTr + "</tr>";
$('#tblname tbody').append(szTr);
item = item+1;
}
else
{
alert ("Max Limit !!!");
}
}else{alert('Enter Text');}
});
// for delete row
$('body').on('click', 'input.DEL', function() {
$(this).parents('tr').remove();
});
$('#get_data').click(function () {
$('#tblname tbody tr').each(function () {
alert($(this).find('td:eq(1)').text());
});
});
});
</script>
</head>
<body>
<table border="0">
<tr>
<td>
Title
</td>
<td>
:
</td>
<td>
<input type="text" name="title" value="" placeholder="Input Title">
</td>
</tr>
<tr>
<td>
Show Item
</td>
<td>
:
</td>
<td>
<select name="max" id="maxitem">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4">Item4</option>
<option value="5">Item5</option>
<option value="6">Item6</option>
</select>
</td>
</tr>
<tr>
<td>
Product
</td>
<td>
:
</td>
<td>
<input type="text" name="product" id="product" value="" placeholder="Add Product">
</td>
<td>
<input type="button" id="ADD" value="Add Item">
</td>
</tr>
</table>
<table border="1" id="tblname">
<thead>
<tr>
<td>
Total Item
</td>
<td>
Name Item
</td>
<td>
DELETE
</td>
<tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="Get Data" id="get_data">
<input type="submit" value="SUBMIT">
</body>
</html>

See if this is what you are trying to do, your description is hard to decipher:
DEMO: https://jsfiddle.net/d8kpsnxx/
<table border="0">
<tr>
<td>Title</td>
<td>:</td>
<td><input type="text" name="title" value="" placeholder="Input Title"></td>
</tr>
<tr>
<td>Show Item</td>
<td>:</td>
<td>
<select name="max" id="maxitem">
<option value=1>1 Item</option>
<option value=2>2 Item</option>
<option value=3>3 Item</option>
<option value=4>4 Item</option>
<option value=5>5 Item</option>
<option value=6>6 Item</option>
</select>
</td>
</tr>
<tr>
<td>Product</td>
<td>:</td>
<td><input type="text" name="product" id="product" value="" placeholder="Add Product"></td>
<td><input type="button" id="ADD" value="Add Item"></td>
</tr>
</table>
<table border="1" id="tblname">
<thead>
<tr>
<td>
Total Item
</td>
<td>
Name Item
</td>
<td>
DELETE
</td>
<tr>
</thead>
<tbody id="cracker">
</tbody>
</table>
<input id="submitall" type="submit" value="SUBMIT">
<script>
$(document).ready(function() {
var isAllowed = 3;
var isSet = 0;
$(this).on('click',"#ADD",function(e) {
// Prevent submission
e.preventDefault();
// Set all the value object
var drop = $("select[name=max]");
var title = $("input[name=title]");
var prod = $("input[name=product]");
// Append the table
$("#cracker").append('<tr><td>'+title.val()+': '+prod.val()+'</td><td>'+drop.val()+'</td><td><input type="submit" class="dMade" name="'+drop.val()+'" value="DELETE" /></td></tr>');
// Clear all the values to start over
drop.val("");
title.val("");
prod.val("");
// Auto increment
isSet++;
// Turn off/on submit buttons
restFormOpts();
});
$(this).on('click',".dMade",function(e) {
var traversed = $(this).parents("tr");
traversed.remove();
isSet--;
restFormOpts();
});
function restFormOpts()
{
if(isSet === isAllowed) {
$("#ADD").attr("disabled",true);
$("#submitall").attr("disabled",false);
}
else {
$("#ADD").attr("disabled",false);
$("#submitall").attr("disabled",true);
}
}
});
</script>

How to get the dynamically cloned table textbox value?

All,
I have table which I am cloning on clicking on button and after cloning table I need to do few calculation in the cloned table as well as in parent table. My problem is that I am not able to do calculation on each appended(clone) table. I mean I wrote a on blur function to do calculation with textbox value but when I am cloning table since class name is same for all textbox, in parent and cloned table my result showing in all textbox instead of corresponding part of the table. Here is my table and my jquery code which I am following.
<html>
<body>
<table>
<tbody>
<tr><td>
<table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product">
<thead><tr>
<td class="mandatory"> * Product Name </td>
<td class="label"> Qty.in Stock</td>
<td class="mandatory">* Qty </td>
<td class="mandatory">* Unit Price</td>
<td class="mandatory">* List Price</td>
<td class="mandatory">* Total</td>
</tr>
</thead>
<tbody class="product_details" id="tbody_product">
<tr class="tr_product_details">
<td>
<input type="text" name="txtproductName[]" id="product-name" />
<a href="">
<img width="17" height="16" src="images/Products_small.gif"> </a>
<input type="hidden" name="productid[]" id="productid" />
</td>
<td>
<input type="text" name="txtqtyStock[]" id="productstock" />
</td>
<td>
<input type="text" name="txtQty" id="product-quatity" class="product-qty" value="3" />
</td>
<td>
<input type="text" name="txtUnitPrice[]" id="product-price" />
</td>
<td>
<input type="text" name="txtListPrice[]" id="product-list-price" class="product-list-price"
/>
</td>
<td><div style="margin-left:120px;">
<input type="text" name="txtTotal[]" size="10" class="total-price" />
</div>
</td>
</tr>
<tr>
<td colspan="5"> <img width="17" height="16" src="images/spacer.gif">Product Description </td>
</tr>
<tr>
<td colspan="5"><textarea style="width:65%" maxlength="250" rows="3" cols="30" name="txtProductDescription[]" id="textarea-product-description"></textarea>
</td>
<td colspan="1" class="tbl">
<table >
<tr>
<td>Discount: </td>
<td> <input type="text" name="txtProductDiscount[]" size="10" class="product-discount" /></td>
</tr>
<tr>
<td class="label">Total After Discount: </td>
<td> <input type="text" name="txtAfterDiscount[]" size="10" class="total-after-discount" /></td>
</tr>
<tr>
<td> Tax: </td>
<td><input type="text" name="txtProductTax[]" size="10" />
</td>
</tr>
<tr>
<td class="label"> Net Total: </td>
<td><input type="text" name="txtNetTotal[]" size="10" class="net-total" /> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" style="margin-left:20px;">
<tr>
<td><input type="button" id="btnaddProduct" value="Add Product" class="button"/> </td>
</tr>
</table>
</body>
</html>
And my script which I am using :
<script type="text/javascript">
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr+" .product-qty").bind("blur change",function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
// alert( $(this).children().children().attr("class"));
// $(this).children().children().attr("class");
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function() {
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
return false;
});
});
</script>

$("#"+qty_attr+" .product-qty")
Comes out empty (no element selected) because you already added .product-qty in parent_qty_id to qty_attr.
$("#"+qty_attr)
Works.
There were alot of other errors in your code which made the blur/change routine run twice etc. I've sanitized it some into this:
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr).blur(function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function(e) {
e.preventDefault();
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
});
});
Further tweaking is probably needed.