We Keep Coding

Saving input from modal to one of three different tables

I have 3 tables in a div that I want to make editable. At the bottom of each table there is an "add" button that opens a modal (they all open the same modal). I have the following JS to add new rows:
How do I get the JS to know which of the three tables to add the row to? The three tables I have are acc_table1, acc_table2, acc_table3. I tried "var table = document.getElementById("acc_table"+no);" which did not work.
if (tit.innerHTML === "Add Account"){
var table = document.getElementById("acc_table1");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = document.getElementById("modal_type").value;
cell2.innerHTML = document.getElementById("modal_price").value;
}

You can do this by considering the context in which the button is clicked. We can use Node.previousElementSibling() or Element.closest() to search for the relevant table (depending on the structure of your DOM), in which the new row should be inserted. In that case, you won't need to pass parameters/arguments to the callback, which will require that you keep track of new IDs and etc.
If your <button> element is immediately after the <table> element, then you can use e.target.previousElementSibling to select the <table> element of interest, when the click event is fired on the button element:
document.querySelectorAll('.addAccount').forEach(function(el) {
el.addEventListener('click', function(e) {
// Table element is immediately before button
var table = e.target.previousElementSibling;
// Perform sanity check before proceeding
if (!table || !table.matches('table'))
return;
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = document.getElementById("modal_type").value;
cell2.innerHTML = document.getElementById("modal_price").value;
});
});
<input type="text" id="modal_type" value="MODAL_TYPE" />
<input type="text" id="modal_price" value="MODAL_PRICE" />
<h1>Table 1</h1>
<table>
<tbody></tbody>
</table>
<button type="button" class="addAccount">Add account</button>
<h1>Table 2</h1>
<table>
<tbody></tbody>
</table>
<button type="button" class="addAccount">Add account</button>
<h1>Table 3</h1>
<table>
<tbody></tbody>
</table>
<button type="button" class="addAccount">Add account</button>
Alternatively, if your <button> element is wrapped in a same parent element (say, a <div> element), then you can use a combination of Element.closest() and Element.querySelector() to find the table in the same parent. Again, no ID is required and all is based on contextual information from DOM hierarchy:
document.querySelectorAll('.addAccount').forEach(function(el) {
el.addEventListener('click', function(e) {
// Table element is immediately before button
var table = e.target.closest('.wrapper').querySelector('table');
// Perform sanity check before proceeding
if (!table)
return;
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = document.getElementById("modal_type").value;
cell2.innerHTML = document.getElementById("modal_price").value;
});
});
<input type="text" id="modal_type" value="MODAL_TYPE" />
<input type="text" id="modal_price" value="MODAL_PRICE" />
<hr />
<div class="wrapper">
<button type="button" class="addAccount">Add account</button>
<p>Random text here</p>
<h1>Table 1</h1>
<table>
<tbody></tbody>
</table>
</div>
<div class="wrapper">
<h1>Table 2</h1>
<table>
<tbody></tbody>
</table>
<p>Random text here</p>
<button type="button" class="addAccount">Add account</button>
</div>

You can use a variable to store desired table ID to use it when you want to save the data to table.
Something along like the example below
var tableId = "";
function openModalFunction(selectedTableId){
tableId = selectedTableId;
}
function saveDataToTable(){
var table = document.getElementById(tableId);
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "cell 1";
cell2.innerHTML = "cell 2";
}
<table id="acc_table1">
<thead><tr><th colspan=2>Table 1</th></tr></thead>
<tfoot>
<tr>
<th colspan=2>
<button onclick="openModalFunction('acc_table1')">table one</button>
</th>
</tr>
</tfoot>
</table>
<hr>
<table id="acc_table2">
<thead><tr><th colspan=2>Table 1</th></tr></thead>
<tfoot>
<tr>
<th colspan=2>
<button onclick="openModalFunction('acc_table2')">table two</button>
</th>
</tr>
</tfoot>
</table>
<hr>
<button onclick="saveDataToTable()">Save</button>

Unable to append string content to html table cell with JavaScript

What I need is append html content to a html table cell with jQuery via append method. This is my code,
$('.add_client').click(function(){
var table = document.getElementById("client_table");
var row = table.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var content = "<strong>Hello</strong>";
cell1.append( content );
cell2.append( content );
});
But appended content looks like <strong>Hello</strong> instead of just Hello. IT will be great if someone can help me on this.

You are using javascript append method not jquery if you want to use jquery append method use it as below $(cell2).append( content )
$('.add_client').click(function(){
var table = document.getElementById("client_table");
var row = table.insertRow(5);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var content = "<strong>Hello</strong>";
$(cell1).append( content );
$(cell2).append( content );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add_client">Add</button>
<table id="client_table">
<tr>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
</tr>
<tr>
<td>A6</td>
<td>B5</td>
</tr>
</table>

You are using jQuery append on a DOM node. You need to wrap the cell in $()
$(cell1).append(content);
But since you have jQuery, use it - for example like this
$('.add_client').click(function() {
let $row = $("<tr/>")
let content = "<strong>Hello</strong>";
$row.append($("<td/>").append(content))
$row.append($("<td/>").append(content))
$("#client_table > tbody > tr").eq(4).after($row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add_client" type="button">Click</button>
<table id="client_table">
<tbody>
<tr>
<td>0</td>
<td>Row 0</td>
</tr>
<tr>
<td>1</td>
<td>Row 1</td>
</tr>
<tr>
<td>2</td>
<td>Row 2</td>
</tr>
<tr>
<td>3</td>
<td>Row 3</td>
</tr>
<tr>
<td>4</td>
<td>Row 4</td>
</tr>
<tr>
<td>5</td>
<td>Row 5</td>
</tr>
</tbody>
</table>

You can use insertAdjacentHTML for appending text as html
cell1.insertAdjacentHTML('beforeend', content);
cell2.insertAdjacentHTML('beforeend', content);

The problem in your case is index. If index is -1 or equal to the number of rows, the row is appended as the last row. If index is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1. about insertRow
$('.add_client').click(function(){
var table = document.getElementById("client_table");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var content = "<strong>Hello</strong>";
cell1.append( content );
cell2.append( content );
});
td {
border: 2px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<input type="button" value="add more" class="add_client"/>
<table id="client_table">
</table>

javascript Insert a new row in a table with 2 headers

I have a table that looks like this :
<button onclick="addRow()">Add a Row</button>
<table id="mytable">
<tr>
<th colspan="3">My header</th>
<tr>
<tr>
<th>header</th>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
And I am trying to create a javascript function to add new rows to the table that would match the last row.
<script>
function addRow() {
var table = document.getElementById("mytable");
var rows = table.getElementsByTagName("tr").length;
var row = table.insertRow(rows);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "header";
cell2.innerHTML = "cell1";
cell3.innerHTML = "cell2";
}
</script>
After spending a good amount of time on google trying to figure it out. I must say I could not find what I am looking for. Any help would be much appreciated.

Your problem is that insertCell() only creates <td> tags, so you need to use document.createElement to create the <th> tag for your first cell.
<button onclick="addRow()">Add a Row</button>
<table id="mytable">
<tr>
<th colspan="3">My header</th>
<tr>
<tr>
<th>header</th>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
<script>
function addRow() {
var table = document.getElementById("mytable");
var rows = table.getElementsByTagName("tr").length;
var row = table.insertRow(rows);
var cell1 = document.createElement("TH");
row.appendChild(cell1);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "header";
cell2.innerHTML = "cell1";
cell3.innerHTML = "cell2";
}
</script>

Javascript: extract cell data from table

I have a scenario where there is a table of 4 rows, in the 4th row is a textbox. When an "onchange" event of the textbox is triggered, I want to extract the data in the cells of the same specific row into another table. and ofcourse my table is consisted of more than one row.
<div class="ProductsTable">
<table class="tablestyle">
<tr>
<th>Item</th>
<th>Price</th>
<th>Preview</th>
<th class="auto-style4">Quantity</th>
<th class="auto-style15">Selected Items</th>
</tr>
<tr id="row1">
<td class="auto-style1" id="item_name">Sofa</td>
<td class="auto-style2" id="item_price">$280.00</td>
<td class="auto-style3">
<img class="itemimage" src="images\sofa1.jpg" />
</td>
<td class="auto-style4">
<input class="quantitybox" id="item_quantity" type="text" onchange="get_quantity();" />
</td>
<td rowspan="10">
<table class="InvoiceTable" id="invoice">
<tr>
<th class="auto-style7">Item</th>
<th class="auto-style2">Price</th>
<th class="auto-style4">Quantity</th>
</tr>
</table>
</td>
</tr>
</table>
</div>
And my javascript is:
function get_quantity() {
var table = document.getElementById("invoice");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2)
cell1.innerHTML = document.getElementById("item_name").innerHTML;
cell2.innerHTML = document.getElementById("item_price").innerHTML;
cell3.innerHTML = document.getElementById("item_quantity").value;
}
How can I create a loop to check through all my table when an "onchange" event is triggered. As I actually have 10 rows in my table.
Preferably without using jquery.

If I understand you correctly you are looking for a function to copy the content of the changed row, that is the data in each column, into the invoice table.
I expect the rows to be created dynamicaly with some sort of iteration. When iterating I expect a unique number is availabe why this can be used as a general selector.
Here is a function to do this:
function get_quantity(rowNumber) {
var table = document.getElementById("invoice" + rowNumber);
var row = table.insertRow(1);
var columns = document.getElementById("row" + rowNumber).childNodes;
var dataColumnIndex = 0;
for (var i = 0; i < columns.length; i++) {
if (columns[i].className == "data") {
var cell = row.insertCell(dataColumnIndex);
cell.innerHTML = columns[i].innerHTML;
dataColumnIndex++;
}
}
var inputQuantity = document.getElementById("item_quantity" + rowNumber).value
row.insertCell(dataColumnIndex).innerHTML = inputQuantity;
}
You select what columns to copy by marking the them with class data.
I gets the invoice table by expecting it to have the id invoice + number. Fx. invoice1. Same goes with each row and the input field.
Here is a plunker with a full example.
Edit
There should only be a single invoice table where all products are added to.
By selecting the same table for row insertion in the function this is fixed.
This updated plunker has the change

Adding Tables Rows and Cells Dynamically Using Javascript

I was trying to add a table row with data in my HTML table using Javascript but it seems I it can't add. Why is that?
<html>
<head>
<title>
</title>
<script>
function addUser(){
var tbl = document.getElementById('datatable');
var lastRow = tbl.rows.length;
var iteration = lastRow+1;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
}
</script>
</head>
<body>
<table border = 1 id = "datatable">
<tr>
<td>ID</td>
<td>NAME</td>
<td>ADDRESS</td>
</tr>
<tr>
<td>1</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>2</td>
<td>Foo</td>
<td>bar</td>
</tr>
</table>
<form id = "myForm" onsubmit = "addUser()">
ID:<input type = "text" name = "txtID"><br />
NAME:<input type = "text" name = "txtName"><br />
ADDRESS:<input type = "text" name = "txtAddress"><br />
<input type = "submit" value = "Add Item">
</form>
</body>
</html>

what you need is not to submit a form
just simply an onclick event could help.
<input type = "button" value = "Add Item" onclick="addUser()">

It's because you're submiyting a form. First your AddUSer is called and works, but the page is reloaded and what you see is the initial page.