I'm doing a web-based POS on PHP. There are two tables; the purpose of the first table is to fetch the products from search box from the database.If the products are available, I will mark the checkbox,click the 'Enter' Button and transfer it to the second table.I'd watch tutorials how to transfer row data from another table but my problem is I can only transfer the row in the first table and I want to add another data on cell because its lacking information.
I'll add picture of what I've done.
https://i.stack.imgur.com/rdSSf.png
function tab1_to_tab2()
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2"),
checkboxes = document.getElementsByName("tab1");
console.log("Val1 = " + checkboxes.length);
for(var i = 0; i < checkboxes.length; i++)
if (checkboxes[i].checked) {
var newRow = table2.insertRow(table2.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
cell1.innerHTML = table1.rows[i+1].cells[0].innerHTML;
cell2.innerHTML = table1.rows[i+1].cells[1].innerHTML;
cell3.innerHTML = table1.rows[i+1].cells[2].innerHTML;
cell4.innerHTML = table1.rows[i+1].cells[3].innerHTML;
console.log(checkboxes.length);
}
}
I expect that column 'Qty','Subtotal' and 'Action' will be filled after I transfer rows from first table.
There are many ways. You can do like this also,
function add(){
$('input:checked[name=actionBox]').each(function() {
var product = $(this).attr('data-product');
var price = $(this).attr('data-price');
$('#bill').append("<tr><td>"+product+"</td><td>"+price+"</td><tr>");
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border>
<tr>
<th>Item</th>
<th>Price</th>
<th>action</th>
</tr>
<tr>
<td>Sample product 1</td>
<td>200.00</td>
<td><input type='checkbox' name='actionBox' data-product='Sample product 1' data-price='200.00'>
</tr>
<tr>
<td>Sample product 1</td>
<td>200.00</td>
<td><input type='checkbox' name='actionBox' data-product='Sample product 2' data-price='300.00'>
</tr>
</table>
<br>
<button onclick='add()'>Enter</button>
<br><br>
<table border>
<tr>
<th>Description</th>
<th>Price</th>
</tr>
<tbody id='bill'>
</tbody>
</table>
Related
I am struggling with something that should be so simple.
I am trying to move a row from one html table to another, basically a table with selection options and input to another table with the final selections and values.
Image for UI
My Html code is as follow,
function GetIndex()
{
var table = document.getElementById("table1");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler = function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
console.log("HERE " + id );
localStorage.setItem("ID", id);
};
};
currentRow.onclick = createClickHandler(currentRow);
AddNextTable();
}
}
function AddNextTable()
{
var ID= localStorage.getItem("ID");
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2");
var table = document.getElementById("table1");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler = function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
var Counter= 0;
Counter++;
var InputSelect= "input" + ID;
console.log(InputSelect);
var NewText= document.getElementById(InputSelect).value;
var newRow = table2.insertRow(table2.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
cell1.innerHTML = table1.rows[id].cells[0].innerHTML;
cell2.innerHTML = table1.rows[id].cells[1].innerHTML;
cell3.innerHTML = table1.rows[id].cells[2].innerHTML;
cell4.innerHTML = "<input type='checkbox' name='check-tab2'>";
cell3.innerHTML= "<input type='text' value="+ NewText+ ">"
var index = table1.rows[1].rowIndex;
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
function tab2_To_tab1()
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2"),
checkboxes = document.getElementsByName("check-tab2");
console.log("Val1 = " + checkboxes.length);
for(var i = 0; i < checkboxes.length; i++)
if(checkboxes[i].checked)
{
// create new row and cells
var newRow = table1.insertRow(table1.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
// add values to the cells
cell1.innerHTML = table2.rows[i+1].cells[0].innerHTML;
cell2.innerHTML = table2.rows[i+1].cells[1].innerHTML;
cell3.innerHTML = table2.rows[i+1].cells[2].innerHTML;
cell4.innerHTML = "<input type='checkbox' name='check-tab1'>";
// remove the transfered rows from the second table [table2]
var index = table2.rows[i+1].rowIndex;
table2.deleteRow(index);
// we have deleted some rows so the checkboxes.length have changed
// so we have to decrement the value of i
i--;
console.log(checkboxes.length);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Transfer Rows Between Two HTML Table</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{overflow: hidden}
.tab{float: left}
.tab-btn{margin: 50px;}
button{display:block;margin-bottom: 20px;}
tr{transition:all .25s ease-in-out}
tr:hover{background-color: #ddd;}
</style>
</head>
<body>
<div class="container">
<div class="tab">
<table id="table1" border="1">
<tr>
<th>Code</th>
<th>Name</th>
<th>Amount</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>
<input type="text" id="input1">
</td>
<td>
<button onclick="GetIndex()">Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Dean</td>
<td><input type="text" id="input2"></td>
<td>
<button onclick="GetIndex()">Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Fred</td>
<td><input type="text" id="input3"></td>
<td>
<button onclick="GetIndex()">Add</button>
</td>
</tr>
</table>
</div>
<div class="tab">
<table id="table2" border="1">
<tr>
<th>Code</th>
<th>Name</th>
<th>Action</th>
<th>Action</th>
</tr>
</table>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
My end goal will be for the user to enter a certain amount of an item in the first table, and have it display in the next. I am looping through something incorrectly somewhere.
I found it quite complicated about your code. Just why not giving it a param that describes which button/input called the function? It will be much easier and also this will no longer require the use of localStorage. Hope this solves your problem.
On the html:
<button onclick="GetIndex('input1')"></button>
On the js
function GetIndex(src) {
...
AddIndex(src);
...
}
function AddIndex(src) {
...
var ID = src;
...
}
function GetIndex(src)
{
var table = document.getElementById("table1");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler = function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
console.log("HERE " + id );
localStorage.setItem("ID", id);
};
};
currentRow.onclick = createClickHandler(currentRow);
AddNextTable(src);
}
}
function AddNextTable(src)
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2");
var table = document.getElementById("table1");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler = function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
var Counter= 0;
Counter++;
var InputSelect= src;
console.log(InputSelect);
var NewText= document.getElementById(InputSelect).value;
var newRow = table2.insertRow(table2.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
cell1.innerHTML = table1.rows[id].cells[0].innerHTML;
cell2.innerHTML = table1.rows[id].cells[1].innerHTML;
cell3.innerHTML = table1.rows[id].cells[2].innerHTML;
cell4.innerHTML = "<input type='checkbox' name='check-tab2'>";
cell3.innerHTML= "<input type='text' value="+ NewText+ ">"
var index = table1.rows[1].rowIndex;
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
function tab2_To_tab1()
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2"),
checkboxes = document.getElementsByName("check-tab2");
console.log("Val1 = " + checkboxes.length);
for(var i = 0; i < checkboxes.length; i++)
if(checkboxes[i].checked)
{
// create new row and cells
var newRow = table1.insertRow(table1.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
// add values to the cells
cell1.innerHTML = table2.rows[i+1].cells[0].innerHTML;
cell2.innerHTML = table2.rows[i+1].cells[1].innerHTML;
cell3.innerHTML = table2.rows[i+1].cells[2].innerHTML;
cell4.innerHTML = "<input type='checkbox' name='check-tab1'>";
// remove the transfered rows from the second table [table2]
var index = table2.rows[i+1].rowIndex;
table2.deleteRow(index);
// we have deleted some rows so the checkboxes.length have changed
// so we have to decrement the value of i
i--;
console.log(checkboxes.length);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Transfer Rows Between Two HTML Table</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container{overflow: hidden}
.tab{float: left}
.tab-btn{margin: 50px;}
button{display:block;margin-bottom: 20px;}
tr{transition:all .25s ease-in-out}
tr:hover{background-color: #ddd;}
</style>
</head>
<body>
<div class="container">
<div class="tab">
<table id="table1" border="1">
<tr>
<th>Code</th>
<th>Name</th>
<th>Amount</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Mark</td>
<td>
<input type="text" id="input1">
</td>
<td>
<button onclick="GetIndex('input1')">Add</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Dean</td>
<td><input type="text" id="input2"></td>
<td>
<button onclick="GetIndex('input2')">Add</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Fred</td>
<td><input type="text" id="input3"></td>
<td>
<button onclick="GetIndex('input3')">Add</button>
</td>
</tr>
</table>
</div>
<div class="tab">
<table id="table2" border="1">
<tr>
<th>Code</th>
<th>Name</th>
<th>Action</th>
<th>Action</th>
</tr>
</table>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
I think you're overcomplicating.
You don't need localStorage, you don't need almost anything. Just a bit of JS .append() to move back and forth your rows. Than using CSS you can additionally pimp the desired items to show/hide or even the button text:
const moveTR = (ev) => {
const EL_tr = ev.currentTarget.closest("tr");
const sel = EL_tr.closest("table").id === "table1" ? "#table2" : "#table1";
document.querySelector(sel + " tbody").append(EL_tr);
};
document.querySelectorAll("table button")
.forEach(EL => EL.addEventListener("click", moveTR));
table {border-collapse: collapse;}
th, td {border: 1px solid #ddd; padding: 5px 10px;}
#table1 button::after {content: "Add"}
#table2 button::after {content: "\2715"}
<table id="table1">
<thead>
<tr><th>Code</th><th>Name</th><th>Amount</th><th>Action</th></tr>
</thead>
<tbody>
<tr>
<td>8</td><td>Fred</td><td><input type="text"></td>
<td><button type="button"></button></td>
</tr>
<tr>
<td>4</td><td>Dean</td><td><input type="text"></td>
<td><button type="button"></button></td>
</tr>
<tr>
<td>1</td><td>Mark</td><td><input type="text"></td>
<td><button type="button"></button></td>
</tr>
</tbody>
</table>
<table id="table2">
<thead>
<tr><th>Code</th><th>Name</th><th>Amount</th><th>Action</th></tr>
</thead>
<tbody>
</tbody>
</table>
I am creating a table using html, bootstrap and js.
I have used rowspan to get cells of different height.
The third cell in each row has more rows than the rest of the cells(hence the rowspan) (If this line is not clear please take a look at the jsfiddle)
Now each of the row in the third cell is a collapsible. So when I click on row it should open another table. (I have just made the first row collapsible for simplicity)
I have 2 issues:
1) The width of the cell increases when I click the collapsible element and decreases when I hide the collapsible element. I want the width to remain the same.
2) I want to make the hidden table start from the same place as the outer tables. It currently starts somewhere randomly on the page
$(document).ready(function() {
var list1 = {
"Feature": "TestSuite",
"Scenario": "TestName",
"Step": "line1<br>line2<br>line3<br>line4<br>",
"Result": "PASS"
}
var list2 = {
"Feature": "TestSuite1",
"Scenario": "TestName1",
"Step": "line1.1<br>line2.1<br>line3.1<br>line4.1<br>",
"Result": "PASS"
}
var dashboardMap = {
"TestSuite1": [list1, list2],
}
for (var key in dashboardMap) {
var resultsTable = dashboardMap[key];
for (var i in resultsTable) {
table = document.getElementById("resultsTable");
row = table.insertRow(-1);
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);
cell4 = row.insertCell(3);
cell1.innerHTML = "N/A";
cell2.innerHTML = resultsTable[i].Scenario;
var list = resultsTable[i].Step.split("<br>");
var rowspan = 0;
list.splice(-1, 1);
for (var step in list) {
rowspan++;
}
cell1.rowSpan = rowspan;
cell2.rowSpan = rowspan;
cell4.rowSpan = rowspan;
var hiddenTable = '<table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds</td> <td>Maria</td> <td>Germany</td> </tr> <tr>'
cell3.innerHTML = '<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button><i id="demo" class="collapse"> ' + hiddenTable + ' </i>'
cell4.innerHTML = resultsTable[i].Result;
var k;
for (k = 1; k < list.length; k++) {
row = table.insertRow(-1);
cell1 = row.insertCell(0);
cell1.innerHTML = list[k];
}
}
}
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="temp" class="container">
<div class="table-responsive">
<table class="table table-striped" id="resultsTable">
<thead>
<tr class="highlight-header" rowspan="3">
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
How to add a table row or table column at specific index by on clicking the table cells, same as excel sheet.
<table >
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Add Row Script:
function AppendRows() {
var tableRows = document.getElementById('myTable'),
row = tableRows.insertRow(tableRows.rows.length);
row.height = '50';
for (var i = 0; i < tableRows.rows[0].cells.length; i++) {
row.insertCell(i), i, 'row';
}
}
Here is an example on how you can insert a new row. There are several approaches you can go with but basically this is the way
function insertrow() {
var newRowIndex = 1;
var row1 = document.getElementById("table").childNodes[1].childNodes[newRowIndex];
var newRow = document.createElement("tr");
var col0 = document.createElement("td");
col0.innerHTML = "newA";
newRow.appendChild(col0);
var col1 = document.createElement("td");
col1.innerHTML = "newB";
newRow.appendChild(col1);
var col2 = document.createElement("td");
col2.innerHTML = "newC";
newRow.appendChild(col2);
row1.parentNode.insertBefore(newRow, row1);
}
<button onclick="insertrow()">Insert row</button>
<table id="table">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
Also i'd suggest you take a look at the insertBefore documentation.
Here's a method to insert a row after a row is clicked. The new row is added immediately after the clicked row, so new rows can be added at different locations.
Let's walk through it:
First we setup an event listener on the table to listen for clicks on the row elements. When a row is clicked, we call the the appendRow method to add a new row, and pass the index where we want the row to appear.
We're using delegation here so dynamically added rows will be included in the event listener.
The appendRow method adds a new row at the defined index, then adds a few table cells for presentation purposes.
var tableEl = document.getElementById('table');
tableEl.addEventListener('click', function(event) {
var el = event.target;
if (el.closest('tr') && el.closest('tbody')) {
var trow = el.parentElement;
var tbody = trow.parentElement;
var index = Array.prototype.indexOf.call(tbody.children, trow);
appendRow(tbody, index + 1);
}
});
function appendRow(tbody, index) {
var row = tbody.insertRow(index);
var cells = ['A', 'B', 'C'];
cells.forEach(function(cell, idx) {
var newCell = row.insertCell(idx);
var newText = document.createTextNode(`Row ${index} - ${cell}`);
newCell.appendChild(newText);
});
}
table {
table-layout: fixed;
width: 100%;
}
td {
border: 1px solid gray;
}
<table id="table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
I have been trying to add both a row and a column to a table, which I think I have finally managed. Now I am trying to create a button using javascript beneath the table that will calculate the sum of each row in the new column and will calculate the the last two columns in the new row. I have tried various ways of creating the button but I can't seem to make it work, and as you can see I don't know how to create the code that will make the calculations that I need.
Here is my code:
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
function addRow()
{
if (!document.getElementById) return false;
var table = document.getElementById("pricetable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.setAttribute("id","sumrow");
var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();
}
function addColumn()
{
if (!document.getElementById) return false;
if (!document.createElement) return false;
var tHead = document.getElementById("pricetable").tHead;
for (var h=0; h<tHead.rows.length; h++)
{
var newTHead = document.createElement("th");
tHead.rows[h].appendChild(newTHead);
newTHead.innerHTML = "Sum";
}
var tBody = document.getElementById("pricetable").tBodies[0];
for (var i=0; i<tBody.rows.length; i++)
{
var newCell = tBody.rows[i].insertCell(-1);
}
}
function addButton()
{
var btn = document.createElement("input");
input.setAttribute("type", "button");
input.setAttribute("name","Calc price");
var foo = document.getElementById("pricetable");
foo.appendChild(btn);
btn.onclick = function()
{
alert ("Calulate price");
}
}
addLoadEvent(addRow);
addLoadEvent(addColumn);
addLoadEvent(addButton);
Here is the HTML code:
<body>
<div id ="container">
<div id ="header">
<h1>Electronics</h1>
</div>
<div id ="content">
<h3>Our prices</h3>
<table id ="pricetable">
<thead>
<tr>
<th>Article</th>
<th>Type</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>23456789</td>
<td>Phone</td>
<td>Apple</td>
<td>6500</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>22256289</td>
<td>Phone</td>
<td>Samsung</td>
<td>6200</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>24444343</td>
<td>Phone</td>
<td>MS Lumia</td>
<td>4200</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>19856639</td>
<td>Tablet</td>
<td>LG</td>
<td>4000</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>39856639</td>
<td>Tablet</td>
<td>Dell</td>
<td>2800</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
<tr>
<td>12349862</td>
<td>Tablet</td>
<td>Apple</td>
<td>3500</td>
<td><input type ="text" size ="3" value ="1"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
I'm trying to find a way to insert a row in a table based on a value that the user inputs and if that value exists in the table. For example, the table will have 10 rows. The user would like to add a row beneath row number 8. Please see screenshot.
<form>
<table class="myTable" id="myTable">
<tr>
<th class="myTable th">PALLET #</th>
<th class="myTable th">CASE COUNT</th>
<th class="myTable th">HILLTOP LOT #</th>
<th class="myTable th">SSCC (LAST 4)</th>
</tr>
<?php
for ($x=1 ; $x <=2 4; $x++) {
echo
'<tr>
<td style="font-size: 160%" id="pallet">' .$x. '</td>
<td id="caseCount"><input type="text" id="inputText_Small" name="caseCount" value="" maxlength="2"/></td>
<td id="hilltopLot"><input type="text" id="inputText_Order" name="hilltopLot" value="" maxlength="10"/></td>
<td id="sscc"><input type="text" id="inputText_Medd" name="sscc" value="" maxlength="4"/></td>
</tr>';
}
?>
</table>
After clicking on the "Add Line" button and typing 8, it will look for row number 8 and insert a row beneath it also naming it row 8.
<br />
<br />
<p class="center">
<input type="submit" value="Submit" name="submit" class="blueButt_Big" />  
<input class="blueButt_Big" type="button" value="Cancel" onclick="parent.location='view_prodLine.php'" />  
<input class="blueButt_Big" type="button" value="Add Line" onclick="addLine()" />  
<input class="blueButt_Big" type="button" value="Delete Line" onclick="myDeleteFunction()" />
</form>
<script>
function addLine() {
var person = prompt("Please enter the pallet number");
if (person != null) {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = person;
cell2.innerHTML = '<input type="text" id="inputText_Small" name="caseCount" value="" maxlength="2"/>';
cell3.innerHTML = '<input type="text" id="inputText_Order" name="hilltopLot" value="" maxlength="10"/>';
cell4.innerHTML = '<input type="text" id="inputText_Medd" name="sscc" value="" maxlength="4"/>';
I've only been able to add a row to the very bottom of the table after prompting the user for input. I know I can specify where the row is inserted using the code I commented out. The obvious problem is that the position where it will insert the new row will change if the user adds more than one line. I fear I may be overthinking it, any thoughts?
//var x = document.getElementById("myTable").rows[22].cells;
//x[0].innerHTML = person;
}
}
function myDeleteFunction() {
document.getElementById("myTable").deleteRow(-1);
}
</script>
You can do it this way:
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<input type="number" id="RowNumber"/>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var RowNumber = document.getElementById("RowNumber").value;
var table = document.getElementById("myTable");
var row = table.insertRow(RowNumber);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
</script>
See it working here:
https://jsfiddle.net/p01r7sjb/1/