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'));

How to calculate sum of one field in table and put it in an input

I have a table in razor and I sent the data by ViewBag from controller
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
#foreach(var item in ViewBag.Products)
{
<tr>
<td>#item.Name</td>
<td>#item.Category</td>
<td>
<input type="text" class="form-control" value="#item.Price" />
</td>
<td>
<input type="text" class="form-controll" value="#item.Count" />
</td>
</tr>
}
</tbody>
</table>
<input type="text" class="form-control" value="#Model.TotalPrice" />
I want to multiple count and price of each row and put it in another input using javascript. and when the user change the value of input, that input that holds the value could change automatically.
if anyone can help me i would be appreciated.

If you are using jquery then it can be achieve as below.
You can update your total on every key press in price or count input.
Add some class to your input. In my example I've took class as price, and class total for display sum.
Add keyup event as below. Also trigger it on $(document).ready to initially set the total value.
$('.price').on('keyup', function() {
var val = +$(this).val();
var valSibling = +$(this).parent().siblings('td').find('.price').val();
if (isNaN(val) || isNaN(valSibling))
return;
$(this).parent().siblings('td').find('.total').val(val * valSibling);
var finaltotal = 0;
$('.total').each(function() {
if(!isNaN($(this).val()))
finaltotal += Number($(this).val());
});
$('.finaltotal').val(finaltotal);
});
$(document).ready(function(){
$('.price').trigger('keyup');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" class="price form-control" value="40" /></td>
<td><input type="text" class="price form-control" value="4" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" class="price form-control" value="20" /></td>
<td><input type="text" class="price form-control" value="2" /></td>
<td><input type="text" class="total form-control" /></td>
</tr>
</tbody>
</table>
<input type="text" class="finaltotal form-control" />

var inputs = $('#container input');
inputs.keyup(function() {
var arr = inputs.toArray();
var sum = 0;
for (var i = 0; i < arr.length / 2; i++)
sum += arr[i * 2].value * arr[i * 2 + 1].value;
$('#result').val(sum);
})
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Count</th>
<th>Price</th>
<tr>
</thead>
<tbody id='container'>
<tr>
<td><input type='number' value='1' /></td>
<td><input type='number' value='2' /></td>
</tr>
<tr>
<td><input type='number' value='10' /></td>
<td><input type='number' value='20' /></td>
</tr>
</tbody>
</table>
Total: <input type='number' readonly id='result' readonly value='202' />

I want to multiple count and price of each row and put it in another input using javascript.
You can add another td in each tr. Then loop through all the tbody tr to calculate the value:
var tr = document.querySelectorAll('tbody tr');
function calculate(){
tr.forEach(function(el){
var td = el.querySelectorAll('td');
// If there is invalid number in input then no change in total.
if (isNaN(td[2].querySelector('input').value) || isNaN(td[3].querySelector('input').value))
return;
td[4].querySelector('input').value = td[2].querySelector('input').value * td[3].querySelector('input').value;
});
}
calculate();
.form-control{
width: 50px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Price</th>
<th>Count</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Category1</td>
<td><input type="text" oninput="calculate()" class="form-control" value="40" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="4" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name2</td>
<td>Category2</td>
<td><input type="text" oninput="calculate()" class="form-control" value="20" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="2" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td>Name3</td>
<td>Category3</td>
<td><input type="text" oninput="calculate()" class="form-control" value="30" /></td>
<td><input type="text" oninput="calculate()" class="form-control" value="3" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>

Traverse inside table rows

I have a table with multiple table rows inside it, each td has an input inside it, i'm trying to traverse inside the table row so i can set the value of an input through another input, it only works for the first table row, how can i make for all the rows in the table? and i have a button that appends a tr when i apped a new tr it doesn't set the value inside it, here is my code:
$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');
$('button').click(function () {
var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
$('tbody').append(tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
</tbody>
</table>
<button>Append row</button>

The problem is that you are using id's. By definition, id's should be unique. When your code runs, it only applies to the first item with that id that it finds. Simply changing your id's to class should do the trick (for that part).
Secondly, it looks like you are creating rows dynamically (adding tr's). run that same function whenever you insert new rows:
$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');
$('button').click(function () {
var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
$('tbody').append(tr);
$('.myFirstInput').closest('tr').find('.mySecondInput').val('1000');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
</tbody>
</table>
<button>Append row</button>

Your issue is that you're using IDs, which must be unique in HTML. Change them to classes instead and this should work as expected.
function addVal() {
var elems = $('.myFirstInput').closest('tr').find('.mySecondInput');
$.each(elems, function(s, e) {
if($(e).val() === '') {
$(e).val('1000');
}
});
}
$(document).ready(function() {
$('button').click(function () {
var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
$('tbody').append(tr);
addVal();
});
addVal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
</tbody>
</table>
<button>Append row</button>

It is not right to use multiple id with the same name in the same document. Use class instead like the following way:
$('input.mySecondInput').each(function(i, el){
$(el).val('1000');
});
$('button#btnAppendRow').click(function () {
var tr = '<tr><td><input type="text" class="myFirstInput"</td>'+
'<td><input type="text"></td>' +
'<td><input type="text" class="mySecondInput"></td></tr>';
$('tbody').append(tr);
$('input.mySecondInput:last-child').val('1000');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
<tr>
<td><input type="text" class="myFirstInput"></td>
<td><input type="text"></td>
<td><input type="text" class="mySecondInput"></td>
</tr>
</tbody>
</table>
<button id="btnAppendRow">Append row</button>

You must give unique identifiers for each input element. First row should have myFirstInput1 and mySecondInput1. Second row, myFirstInput2 and mySecondInput2, and so on. That way you'll be able to reference each input precisely.

Auto Table Calculation

I have table with quantity cell when change quantity it need to multiply with other parent td value.and sum the column values .
(i.e) if i change quantity to 2 then the parent rows need multiply by 2 & columns get value get added
I done all the calculation part without input in td now i added input and the calculation got affected i debug and checked it i don't know what would be the problem
Here my fiddle:
https://jsfiddle.net/hahkarthick/57zpk59k/3/
$(document).ready(function(){
$('.quantity').on('change, keyup',function(){
var val=$(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal =$(this).data('val');
$(this).data('val',val);
//To avoid auto inc while pressing arrow keys //
if(val =='' || isNaN(val) || val < 1 || val == undefined){
val = 1;
}
$(this).siblings().each(function(){
var tbvalue=$(this).data("val");
var result= parseInt(tbvalue)*parseInt(val);
$(this).text(result);
});
autoSum();
});
autoSum();
});
function autoSum(){
for (var i = 1; i <= 4; i++) {
var sum = 0;
var tdBoxes = $('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')');
for(var j=0; j<tdBoxes.length-1;j++)
{
var value = $(tdBoxes[j]).val();
sum += (value == undefined || value == "")? 0 : parseInt(value);
}
// set total in last cell of the column
$('.auto_sum>tbody>tr>td>input:nth-child(' + i + ')').last().html(sum);
// $('.auto_sum>tbody>tr>td:nth-child(' + i + ')').last().toggleClass('total');
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover">
<thead>
<tr>
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" data-val="" value="20" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input type="number" data-val="" value="5" name=""></td>
<td><input type="number" data-val="" value="6" name=""></td>
<td><input type="number" data-val="" value="12" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input type="number" data-val="" value="45" name=""></td>
<td><input type="number" data-val="" value="23" name=""></td>
<td><input type="number" data-val="" value="22" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr class="total">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>

Hope this helps...
<div class="container">
<h2>Table calculation</h2>
<p>Calculaton</p>
<table class="auto_sum table table-hover" id="sum_table">
<thead>
<tr class="title">
<th>value1</th>
<th>value2</th>
<th>value3</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-val="" value="20[2]" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input type="number" data-val="" value="10" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input type="number" data-val="" value="5" name=""></td>
<td><input type="number" data-val="" value="6" name=""></td>
<td><input type="number" data-val="" value="12" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr>
<td><input type="number" data-val="" value="45" name=""></td>
<td><input type="number" data-val="" value="23" name=""></td>
<td><input type="number" data-val="" value="22" name=""></td>
<td><input class="quantity" type="number" name=""></td>
</tr>
<tr class="totalColumn">
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td class="totalCol">Total:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$('.quantity').on('change',function(){
var val=$(this).val();
console.log(val)
// To avoid auto inc while pressing arrow keys
var preVal =$(this).data('val');
$(this).data('val',val);
//To avoid auto inc while pressing arrow keys //
if(val =='' || isNaN(val) || val < 1 || val == undefined){
val = 1;
}
$(this).parent().siblings().each(function(){
var oldval = $(this).find('input').val();
var arr = oldval.split("[");
console.log(arr);
//var newval = val * oldval;
var newval = (val * parseFloat(arr[0])).toFixed(2);
console.log(newval);
if(arr.length > 1) {
newval = newval + "[" + arr[1];
}
$(this).find('input').val(newval);
});
autoSum();
});
autoSum();
});
function autoSum(){
var $dataRows=$("#sum_table tr:not('.total, .title')");
var totals=[0,0,0];
$dataRows.each(function() {
$(this).find('input').each(function(i){
totals[i]+=parseFloat( $(this).val());
});
});
$("#sum_table td.totalCol").each(function(i){
$(this).html("total:"+totals[i]);
});
}
</script>

I have updated the fiddle.
I have made following changes :-
$('.quantity').on('change, keyup',function(){ changed to $('.quantity').on('keyup',function(){
$(this).siblings().each(function(){ changed to $(this).parent().siblings().each(function(){
var tbvalue=$(this).data("val"); changed to var tbvalue=$(this).find("input[type=number]").val();
Hope it helps.

add multiple row dynamically

This is example of my code..
from the example, I've got two rows..
What I want to do is, I want to add the two rows dynamically..
thank you
<table id="datatable">
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
</table>
<button type="button" id="add" onclick="addRow('dataTable')">
<b>Add</b>
</button>
function addRow(tableID) {
alert('ttt');
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
jsfiddle example

Try this:
HTML
<table id="datatable">
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
</table>
<button type="button" id="add" onclick="addRow('dataTable')">
<b>Add</b>
</button>
JS
$(document).ready(function() {
$('#add').click(function(){
$('#datatable').append(' <tr> <td>Account No</td> <td>:</td> <td colspan="2"><input size="20" type="text" /></td> <td>Bill No</td> <td>:</td> <td><input type="text" /></td> </tr> <tr> <td>Name</td> <td>:</td> <td colspan="2"><input type="text" /></td> <td>Bill date</td> <td>:</td> <td><input type="text" /></td> </tr>');
});
});
Fiddle: http://jsfiddle.net/zLXmQ/4/

Just browsing through and would like to point out that your table id- is datatable and your parameter is dataTable. hopefully thats pertinent

simply you can do this :
function addRow(tableId)
{
$('#' + tableId + ' tr:last').after('<tr><td>Enter You New Row Data Here..</td></tr>');
}
for more information check this : Add table row in jQuery