We Keep Coding

Javascript insert new element

I want to make a new row from a table when I press enter on input text. from code below when I press enter on input text name = "desc" then the new row with an new element just like current row will appear.
document.querySelector('.md-tt-inp-desc').addEventListener('keypress', (e)=> {
const keynum = e.keyCode||e.which;
const name = document.querySelector('.md-tt-inp-name');
const desc = document.querySelector('.md-tt-inp-desc');
const md_tt_tbody = document.querySelector('.md-tt-tbody');
if(keynum === 13 && name.value !== '' && desc.value !== ''){
const el = ` <tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>`;
document.querySelector('.md-tt-inp-desc').insertAdjacentHTML("afterend", el);
// document.querySelector('.md_tt_tbody').appendChild(el);
}
});
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody class= "md-tt-tbody">
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>
</tbody>
</table>
from code above the new row doesn't show from what I want. I want the new row appear just like the current row. I try with appendchild too but I get an error I don't know how to insert with multiple element.

I suppose you want to add a row to the table, after the last row. Here's a solution using event delegation (so, just one handler needed for the current and all future rows). Note: the deprecated keyCode/which is replaced by the more modern [event].key here.
document.addEventListener("keyup", handle);
function handle(evt) {
if (evt.target.classList.contains('md-tt-inp-desc') && evt.key === "Enter") {
return addRow();
}
}
function addRow() {
console.clear();
const name = document.querySelector('.md-tt-inp-name');
const desc = document.querySelector('.md-tt-inp-desc');
const md_tt_tbody = document.querySelector('.md-tt-tbody');
if (name.value.trim().length > 0 && desc.value.trim().length > 0) {
const newRow = `
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>`;
return document.querySelector('.md-tt-inp-desc')
.closest("table")
.insertAdjacentHTML("beforeend", newRow);
}
console.log("please fill name and description");
}
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody class="md-tt-tbody">
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name" placeholder="name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc" placeholder="description"></td>
</tr>
</tbody>
</table>

Just a small adjustment is needed:
you need to find the current tr. there are so many solutions but I added an id to this to find it later easily.
document.querySelector('.md-tt-inp-desc').addEventListener('keypress', (e)=> {
const keynum = e.keyCode||e.which;
const name = document.querySelector('.md-tt-inp-name');
const desc = document.querySelector('.md-tt-inp-desc');
const md_tt_tbody = document.querySelector('.md-tt-tbody');
if(keynum === 13 && name.value !== '' && desc.value !== ''){
const el = ` <tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>`;
document.querySelector('#first-row').insertAdjacentHTML("afterend", el);
// document.querySelector('.md_tt_tbody').appendChild(el);
}
});
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody class= "md-tt-tbody">
<tr id="first-row">
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>
</tbody>
</table>

this is a solution for adding a new row plus move focus on the first input that is newly added.
const rowHandler = (e) => {
if (e.target.classList.contains('md-tt-inp-desc') && e.key === "Enter") {
console.clear();
const name = document.querySelector('.md-tt-inp-name');
const desc = document.querySelector('.md-tt-inp-desc');
const md_tt_tbody = document.querySelector('.md-tt-tbody');
if (name.value.trim().length > 0 && desc.value.trim().length > 0)
addRow();
}
}
document.querySelector('.table').addEventListener("keyup", rowHandler);
const addRow = () => {
const newRow = `
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc"></td>
</tr>`;
document.querySelector('.md-tt-inp-desc')
.closest("table")
.insertAdjacentHTML("beforeend", newRow);
var itemIds = document.querySelectorAll('.md-tt-inp-id');
itemIds[itemIds.length - 1].focus();
console.log("please fill name and description");
}
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody class="md-tt-tbody">
<tr>
<td><input type="text" name="item_id" class="md-tt-inp-id"></td>
<td><input type="text" name="item_name" class="md-tt-inp-name" placeholder="name"></td>
<td><input type="text" name="desc" class="md-tt-inp-desc" placeholder="description"></td>
</tr>
</tbody>
</table>

How to get Dynamic table row values

I have an HTML table whose rows are created when page loaded,at the end of the row there is a cross button so what I am trying to do is,when I click that button I want to have the values inside the current row, I have ItemName,I Code,Price any many more so I want some fields value when I click that button, My all the cells are in form of input fields only
What I am doing
function rowappend(tbody) {
const markup =
`<tr>
<td>
<input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
</td>
<td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
<td>
<input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
</td>
<td>
<input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
</td>
<td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<input type="hidden" name="unittd" id="unittd" class="form-control commantd">
<td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
</tr>`
$(tbody).append(markup);
}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
$.confirm({
title: '',
content: 'Do you want to clear ?',
buttons: {
Yes: () => {
keys: ['enter', 'space']
action: function() {
var tr = $(this).closest('tr');
var td = tr.find("td").eq(4);
var input = td.find('input');
alert(input.val())
tr.remove();
},
},
No: function() {
},
}
})
}) $(document).keypress(function(event) {
const row = event.target.parentElement.parentElement
var keycode = event.keyCode || event.which;
if (keycode == '13') {
if (event.target.matches('[name=discPercentagetd]')) {
if ($(row).parent().find('tr').length - $(row).index() === 1) {
rowappend(event.target.parentElement.parentElement.parentElement)
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<div class="row tableGrn" id="commonDvScroll">
<table class="table table-bordered" id="tableInvoice">
<thead>
<tr>
<th id="itemNameth" class="commanth">Item Name</th>
<th id="itemCodeth" class="commanth">I Code</th>
<th id="mrpth" class="commanth">MRP</th>
<th id="purRateth" class="commanth">Price</th>
<th id="unitQtyth" class="commanth">Unit Qty</th>
<th id="discPercentageth" class="commanth">Disc %</th>
<th id="discAmtth" class="commanth">Disc Amt</th>
<th id="gstPercentageth" class="commanth">GST %</th>
<th id="gstAmtth" class="commanth">GST Amt</th>
<th id="totalAmtth" class="commanth">Total Amt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

$(this) in your click function refer to the <i class="fas fa-times fa-2x remove-btn" ></i> so $(this).find('td') will return nothing. You need to use $(this).closest('tr') to get the row first.
function rowappend(tbody) {
const markup =
`<tr>
<td>
<input type="text" class="form-control commanChange" id="itemNametd" name="itemNametd">
</td>
<td><input type="text" name="itemCodetd" id="itemCodetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="mrptd" id="mrptd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="purRatetd" id="purRatetd" class="form-control commantd"></td>
<td>
<input type="tel" id="unitQtytd"class="form-control commanChange" name="unitQtytd">
</td>
<td>
<input type="tel" id="discPercentagetd"class="form-control commanChange" name="discPercentagetd" value="0.00">
</td>
<td><input type="text" name="discAmttd" id="discAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstPercentagetd" id="gstPercentagetd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="gstAmttd" id="gstAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<td><input type="text" name="totalAmttd" id="totalAmttd" class="form-control commantd" readonly="readonly" tabindex="-1"></td>
<input type="hidden" name="unittd" id="unittd" class="form-control commantd">
<td style="background-color: white;border: 1px white"><i class="fas fa-times fa-2x remove-btn" ></i></td>
</tr>`
$(tbody).append(markup);
}
rowappend($('tbody', '#tableInvoice'));
$(document).on("click", ".remove-btn", function(e) {
$.confirm({
title: '',
content: 'Do you want to clear ?',
buttons: {
Yes: {
keys: ['enter', 'space'],
action: () => {
var tr = $(this).closest('tr');
var td = tr.find("td").eq(4);
var input = td.find('input');
alert(input.val())
tr.remove();
}
},
No: function() {
},
}
})
})
$(document).keypress(function(event) {
const row = event.target.parentElement.parentElement
var keycode = event.keyCode || event.which;
if (keycode == '13') {
if (event.target.matches('[name=discPercentagetd]')) {
if ($(row).parent().find('tr').length - $(row).index() === 1) {
rowappend(event.target.parentElement.parentElement.parentElement)
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="row tableGrn" id="commonDvScroll">
<table class="table table-bordered" id="tableInvoice">
<thead>
<tr>
<th id="itemNameth" class="commanth">Item Name</th>
<th id="itemCodeth" class="commanth">I Code</th>
<th id="mrpth" class="commanth">MRP</th>
<th id="purRateth" class="commanth">Price</th>
<th id="unitQtyth" class="commanth">Unit Qty</th>
<th id="discPercentageth" class="commanth">Disc %</th>
<th id="discAmtth" class="commanth">Disc Amt</th>
<th id="gstPercentageth" class="commanth">GST %</th>
<th id="gstAmtth" class="commanth">GST Amt</th>
<th id="totalAmtth" class="commanth">Total Amt</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

You can use onclick event for the '.remove-btn'.
/* Adding onclick event */
<i class="fas fa-times fa-2x remove-btn" onclick="fnRemoveRow(this);"></i>
/*Javascript code */
function fnRemoveRow(_this)
{
var $tr=$(_this).closest('tr');
var itemName = $tr.find("#itemNametd").val();
/* Get other values */
$tr.remove();
}

First, find out the parent of that cross button and then find out the value.
Make sure do not use Ids if you are creating multiple rows and do not access using the id because it should be unique and I assumed there will be more then row in this list
$('.remove-btn').click(function(e) {
/* First find out parent of X button then inside that find input element and then value.
I have added here the name while finding the perticular value you can use the id as well but it will not work if more then 1 row.
*/
alert($(this).parent().parent().find('input[name="itemNametd"]').val())
$(this).closest('tr').remove();})}

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>

Apply function in dynamically added each row differently with jQuery

I have added new rows dynamically with jQuery and applied a function but I want to apply this differently for each row. right now its applying commonly for every rows.
HTML code:
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text"></td>
<td>
<select class="form-control" id="bank_ac_no">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Jquery Codes:
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text"></td><td><select class="form-control" id="bank_ac_no"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
if ($(this).val() == 'Vault'){
$('#bank_title, #bank_ac_no').hide();
}
else if ($(this).val() == 'Bank'){
$("tr.bank_deposit").each(function (){
$('#bank_title, #bank_ac_no').show();
});
}
});
When I am changing the deposit method I want to hide/show the two fields in each row but its applying in every row.
see the demo with codes:
https://jsfiddle.net/wasid/33qp9ewn/3/

You can add an attribute (like row-id) for inputs to determine which row has been processed. I modified HTML and Javascript codes. Also, you can take a look modifed codes as Fiddle Demo
HTML
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method" row-id="0">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text" row-id="0"></td>
<td>
<select class="form-control" id="bank_ac_no" row-id="0">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Javascript;
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method" row-id="'+i+'"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text" row-id="'+i+'"></td><td><select class="form-control" id="bank_ac_no" row-id="'+i+'"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="'+i+'"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
var rowId = $(this).attr("row-id");
if ($(this).val() == 'Vault'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").hide();
}
else if ($(this).val() == 'Bank'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").show();
}
});

How to generate the rows automatically based on input values?

<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
This is input text box code in view page......
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
This is my table code.... in view page
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', 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 for automatic cell creation.
My problem is how to create a automatic rows by giving input into input fields.
And the sno is automatically generate(i.e 1,2... based on the input values).
please help to solve this issue.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
<label class="col-lg-1 control-label" id="pd">Due Start:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="text" class="form-control input-xs datepicker-dates Dues" placeholder="Due Start Date…" id="txtDate" name="TDDate" value="">
</div>
</div>
</div>
</div>
<div class="container">
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody id="appendRows">
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno" value="1"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
</script>
<script type="text/javascript">
$(function(){
$("body").on("focusout",".Mode",function(){
var trLength=$('body #appendRows tr').length;
for (var i = 1; i <trLength; i++) {
$('#appendRows tr:nth-child(2)').remove();
}
var val = $(this).val();
var i=0;
for(i==0;i<val;i++){
var html = $("#appendRows tr:first-child").clone();
html.find("input").val("");
html.find('input[name^="Sno"]').val(i+2);
$('#appendRows').append(html);
}
});
})
</script>