Adding HTML table rows and columns using Javascript Array , not working

Adding HTML table rows and columns using Javascript Array , not working - javascript

I am working with HTML table and JS array. I have table header and last row of Subtotal.
I have tried to create and add rows with the code below but it's not working. The code should read the array elements and should create rows as per the number of elements and then add columns to it as well.
Help me please!
var titles = ["Book 1","Book 2","Book 3"];
var quantities = [3,1,2];
var prices = [80,125,75];
var GrandTotal = 0;
function myTable() {
for(var i=0;i<titles.length;i++){
var x = document.createElement("TR");
x.setAttribute("id", "myTr[i]");
document.getElementById("table").appendChild(x);
for(var j=0;titles.length;j++){
//creating Title columns
var titleColumn = document.createElement("TD");
var titleColumnText = document.createTextNode(titles[j]);
//adding title values
titleColumn.appendChild(titleColumnText);
document.getElementById("myTr[i]").appendChild(titleColumn);
//creating Quantity columns
var qtyColumn = document.createElement("TD");
var qtyColumnText = document.createTextNode(quantities[j]);
//adding Quantity values
qtyColumn.appendChild(qtyColumnText);
document.getElementById("myTr[i]").appendChild(qtyColumn);
//creating Price columns
var priceColumn = document.createElement("TD");
var priceColumnText = document.createTextNode(prices[j]);
//adding Price values
priceColumn.appendChild(priceColumnText);
document.getElementById("myTr[i]").appendChild(priceColumn);
// Amount calculation
var amt=prices[j]*quantities[j];
//creating Amt columns
var amtColumn = document.createElement("TD");
var amtColumnText = document.createTextNode(amt);
//adding Amt values
priceColumn.appendChild(amtColumnText);
document.getElementById("myTr[i]").appendChild(amtColumn);
GrandTotal += amt;
}
}
}
document.getElementById("grandTotal").innerHTML= GrandTotal;
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Table and Array</title>
<style>
table{
border: 1px solid black;
border-collapse: collapse;
}
th, tr, td{
border: 1px solid black;
}
</style>
</head>
<body ">
<div class="title">
<h1>My Store</h1>
</div>
<table class="table-fill" id="table">
<thead>
<tr>
<th colspan="2">Product Title</th>
<th>Quantity</th>
<th>Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">I want to add rows anc columns here dynamically</td>
</tr>
<tr class="totals">
<td colspan="4" id="subTotal">Subtotal</td>
<td id="grandTotal"></td>
</tr>
</tbody>
</table>
<script src="js/data.js" type="text/JavaScript"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Table and Array</title>
<style>
table{
border: 1px solid black;
border-collapse: collapse;
}
th, tr, td{
border: 1px solid black;
}
</style>
</head>
<body ">
<div class="title">
<h1>My Store</h1>
</div>
<table class="table-fill" id="table">
<thead>
<tr>
<th colspan="2">Product Title</th>
<th>Quantity</th>
<th>Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">I want to add rows anc columns here dynamically</td>
</tr>
<tr class="totals">
<td colspan="4" id="subTotal">Subtotal</td>
<td id="grandTotal"></td>
</tr>
</tbody>
</table>
</body>
<script>
var titles = ["Book 1","Book 2","Book 3"];
var quantities = [3,1,2];
var prices = [80,125,75];
var GrandTotal = 0;
function myTable() {
console.log('a')
for(var i=0;i<titles.length;i++){
var x = document.createElement("TR");
x.setAttribute("id", `${titles[i]}`);
document.getElementById("table").appendChild(x);
console.log(document.getElementById("table"))
//creating Title columns
var titleColumn = document.createElement("TD");
var titleColumnText = document.createTextNode(titles[i]);
//adding title values
titleColumn.appendChild(titleColumnText);
console.log(document.getElementById(`${titles[i]}, ${titles[i]}`))
document.getElementById(`${titles[i]}`).appendChild(titleColumn);
//creating Quantity columns
var qtyColumn = document.createElement("TD");
var qtyColumnText = document.createTextNode(quantities[i]);
//adding Quantity values
qtyColumn.appendChild(qtyColumnText);
document.getElementById(`${titles[i]}`).appendChild(qtyColumn);
//creating Price columns
var priceColumn = document.createElement("TD");
var priceColumnText = document.createTextNode(prices[i]);
//adding Price values
priceColumn.appendChild(priceColumnText);
document.getElementById(`${titles[i]}`).appendChild(priceColumn);
// Amount calculation
var amt=prices[i]*quantities[i];
//creating Amt columns
var amtColumn = document.createElement("TD");
var amtColumnText = document.createTextNode(amt);
//adding Amt values
amtColumn.appendChild(amtColumnText);
document.getElementById(`${titles[i]}`).appendChild(amtColumn);
GrandTotal += amt;
}
}
myTable();
var grandTotalText = document.createTextNode(GrandTotal);
document.getElementById("grandTotal").appendChild(grandTotalText)
</script>
</html>

Related

How to show JSON response in datatable using JavaScript [duplicate]

I have an HTML table with a header and a footer:
<table id="myTable">
<thead>
<tr>
<th>My Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaaaa</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>My footer</td>
</tr>
<tfoot>
</table>
I am trying to add a row in tbody with the following:
myTable.insertRow(myTable.rows.length - 1);
but the row is added in the tfoot section.
How do I insert tbody?

If you want to add a row into the tbody, get a reference to it and call its insertRow method.
var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
// Insert a row at the end of table
var newRow = tbodyRef.insertRow();
// Insert a cell at the end of the row
var newCell = newRow.insertCell();
// Append a text node to the cell
var newText = document.createTextNode('new row');
newCell.appendChild(newText);
<table id="myTable">
<thead>
<tr>
<th>My Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>initial row</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>My Footer</td>
</tr>
</tfoot>
</table>
(old demo on JSFiddle)

You can try the following snippet using jQuery:
$(table).find('tbody').append("<tr><td>aaaa</td></tr>");

Basic approach:
This should add HTML-formatted content and show the newly added row.
var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;

I think this script is what exactly you need
var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)

You're close. Just add the row to the tbody instead of table:
myTbody.insertRow();
Just get a reference to tBody (myTbody) before use. Notice that you don't need to pass the last position in a table; it's automatically positioned at the end when omitting argument.
A live demo is at jsFiddle.

Add rows:
<html>
<script>
function addRow() {
var table = document.getElementById('myTable');
//var row = document.getElementById("myTable");
var x = table.insertRow(0);
var e = table.rows.length-1;
var l = table.rows[e].cells.length;
//x.innerHTML = " ";
for (var c=0, m=l; c < m; c++) {
table.rows[0].insertCell(c);
table.rows[0].cells[c].innerHTML = " ";
}
}
function addColumn() {
var table = document.getElementById('myTable');
for (var r = 0, n = table.rows.length; r < n; r++) {
table.rows[r].insertCell(0);
table.rows[r].cells[0].innerHTML = " ";
}
}
function deleteRow() {
document.getElementById("myTable").deleteRow(0);
}
function deleteColumn() {
// var row = document.getElementById("myRow");
var table = document.getElementById('myTable');
for (var r = 0, n = table.rows.length; r < n; r++) {
table.rows[r].deleteCell(0); // var table handle
}
}
</script>
<body>
<input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'>
<input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>
<input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>
<input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>
<table id='myTable' border=1 cellpadding=0 cellspacing=0>
<tr id='myRow'>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
And cells.

let myTable = document.getElementById('myTable').getElementsByTagName('tbody')[0];
let row = myTable.insertRow();
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);
cell1.innerHTML = 1;
cell2.innerHTML = 'JAHID';
cell3.innerHTML = 23;
row = myTable.insertRow();
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);
cell1.innerHTML = 2;
cell2.innerHTML = 'HOSSAIIN';
cell3.innerHTML = 50;
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
padding: 10px;
}
<table id="myTable">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
</thead>
<tbody></tbody>
</table>

Add Column, Add Row, Delete Column, Delete Row. Simplest way
function addColumn(myTable) {
var table = document.getElementById(myTable);
var row = table.getElementsByTagName('tr');
for(i=0;i<row.length;i++){
row[i].innerHTML = row[i].innerHTML + '<td></td>';
}
}
function deleterow(tblId)
{
var table = document.getElementById(tblId);
var row = table.getElementsByTagName('tr');
if(row.length!='1'){
row[row.length - 1].outerHTML='';
}
}
function deleteColumn(tblId)
{
var allRows = document.getElementById(tblId).rows;
for (var i=0; i<allRows.length; i++) {
if (allRows[i].cells.length > 1) {
allRows[i].deleteCell(-1);
}
}
}
function myFunction(myTable) {
var table = document.getElementById(myTable);
var row = table.getElementsByTagName('tr');
var row = row[row.length-1].outerHTML;
table.innerHTML = table.innerHTML + row;
var row = table.getElementsByTagName('tr');
var row = row[row.length-1].getElementsByTagName('td');
for(i=0;i<row.length;i++){
row[i].innerHTML = '';
}
}
table, td {
border: 1px solid black;
border-collapse:collapse;
}
td {
cursor:text;
padding:10px;
}
td:empty:after{
content:"Type here...";
color:#cccccc;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>
<input type="button" value="+Column" onclick="addColumn('tblSample')">
<input type="button" value="-Column" onclick="deleteColumn('tblSample')">
<input type="button" value="+Row" onclick="myFunction('tblSample')">
<input type="button" value="-Row" onclick="deleterow('tblSample')">
</p>
<table id="tblSample" contenteditable><tr><td></td></tr></table>
</form>
</body>
</html>

You can also use querySelector to select the tbody, then insert a new row at the end of it.
Use append to insert Node or DOMString objects to a new cell, which will then be inserted into the new row.
var myTbody = document.querySelector("#myTable>tbody");
var newRow = myTbody.insertRow();
newRow.insertCell().append("New data");
<table id="myTable">
<thead>
<tr>
<th>My Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>My footer</td>
</tr>
</tfoot>
</table>

I have tried this, and this is working for me:
var table = document.getElementById("myTable");
var row = table.insertRow(myTable.rows.length-2);
var cell1 = row.insertCell(0);

You can use the following example:
<table id="purches">
<thead>
<tr>
<th>ID</th>
<th>Transaction Date</th>
<th>Category</th>
<th>Transaction Amount</th>
<th>Offer</th>
</tr>
</thead>
<!-- <tr th:each="person: ${list}" >
<td><li th:each="person: ${list}" th:text="|${person.description}|"></li></td>
<td><li th:each="person: ${list}" th:text="|${person.price}|"></li></td>
<td><li th:each="person: ${list}" th:text="|${person.available}|"></li></td>
<td><li th:each="person: ${list}" th:text="|${person.from}|"></li></td>
</tr>
-->
<tbody id="feedback">
</tbody>
</table>
JavaScript file:
$.ajax({
type: "POST",
contentType: "application/json",
url: "/search",
data: JSON.stringify(search),
dataType: 'json',
cache: false,
timeout: 600000,
success: function (data) {
// var json = "<h4>Ajax Response</h4><pre>" + JSON.stringify(data, null, 4) + "</pre>";
// $('#feedback').html(json);
//
console.log("SUCCESS: ", data);
//$("#btn-search").prop("disabled", false);
for (var i = 0; i < data.length; i++) {
//$("#feedback").append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td></tr>');
$('#feedback').append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td></tr>');
alert(data[i].accountNumber)
}
},
error: function (e) {
var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>";
$('#feedback').html(json);
console.log("ERROR: ", e);
$("#btn-search").prop("disabled", false);
}
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Expense Tracker</title>
</head>
<body>
<h1>Expense Tracker</h1>
<div id="myDiv">
<label for="name">Name:</label>
<input
type="text"
name="myInput"
id="myInput"
placeholder="Name of expense"
size="50"
/><br /><br />
<label for="date">Date:</label>
<input type="date" id="myDate" name="myDate" />
<label for="amount">Amount:</label>
<input
type="text"
name="myAmount"
id="myAmount"
placeholder="Dollar amount ($)"
/><br /><br />
<span onclick="addRow()" class="addBtn">Add Expense</span>
</div>
<br />
<input type="button" value="Add Rows" onclick="addRows()" />
<!-- Optional position -->
<table id="myTable">
<tr>
<th>Name</th>
<th>Date</th>
<th>Amount</th>
<th>Delete</th>
</tr>
<tr>
<td>McDonald's</td>
<td>6/22/2017</td>
<td>$12.00</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)" />
</td>
</tr>
</table>
<script>
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
function addRows() {
console.log("add rows");
document.getElementById("myTable").innerHTML += `<tr>
<td>McDonald's</td>
<td>6/22/2017</td>
<td>$12.00</td>
<td>
<input type="button" value="Delete" onclick="deleteRow(this)" />
</td>
</tr>`;
}
</script>
</body>
</html>

$("#myTable tbody").append(tablerow);

Moving data from one html table to another

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>

Change inner txt of table

I have a table with names, surnames and etc. I should change the value of the clicked td using input. I managed to changed the value of the first td but I am not sure how can change the values of specific td.
Here is my code.
let inp
let changevalue
let click = addEventListener("focus" ,function(){
changevalue = document.querySelector("td")
inp = document.createElement("input")
inp.value = changevalue.innerHTML
changevalue.innerHTML = " "
changevalue.append(inp)
})
let newclick = addEventListener("blur" , function(){
changevalue.innerHTML = inp.value
})
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%" id = "TB">
<tr >
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr >
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

You can add click event listeners on each td element and use the blur event only for the dynamically created input.
const tds = document.querySelectorAll("#TB td");
tds.forEach(td => {
td.addEventListener("click", e=>{
let inp = document.createElement("input")
inp.value = td.innerHTML
td.innerHTML = " "
td.append(inp);
inp.focus();
inp.addEventListener("blur", e=>{
td.innerHTML = inp.value;
});
});
});
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%" id = "TB">
<tr >
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr >
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Delete Dynamic HTML table using table id?

I'm creating multiple tables from one table (table id = table6)
If I created a new table from table id ='table6', I want to delete that newly generated table using its table id. I have assigned table ids to the newly generated tables. what's wrong in my code?
I want to delete this HTML table. Any hint?
var aggTableNum = 0;
function generateAgg() {
const originTable = document.getElementById('table6');
const baseRowTbl = originTable.querySelector('tbody tr');
let newTable = originTable.cloneNode(true);
let newTbody = newTable.querySelector('tbody');
newTable.id = 'newAggTable' + ++aggTableNum;
// for (i = 0; i < 0; i++) {
// newTbody.appendChild(baseRowTbl.cloneNode(true));
// }
newTable.querySelectorAll('input').forEach((element) => {
element.value = '';
});
document.body.appendChild(newTable);
}
function tID() {
$('table').on('click', 'button', function (e) {
alert(e.delegateTarget.id);
var tbl = e.delegateTarget.id;
console.log(tbl);
// if (tbl) tbl.parentNode.removeChild(tbl);
$(tbl).remove();
});
}
table {
border-collapse: collapse;
margin: 1em;
}
thead {
background-color: lightblue;
}
td,
th {
border: solid grey 1px;
padding: 1em;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" onclick="generateAgg()">Generate New Table</button>
<table id="table6">
<thead>
<th colspan="6">Table</th>
<tr>
<th> Column 1 </th>
<th> Column 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input>
</input>
</td>
<td><input>
</input></td>
</tr>
<tr>
<td>
<button style="margin: 1%" onclick="tID()">delete </button>
</td>
</tr>
</tbody>
</table>
JsFiddle link - > https://jsfiddle.net/shreekantbatale2/hn0286zd/8/

Though you are getting the table id's value, need to refer that properly with jquery with a leading # in the selector.
Change this:
$(tbl).remove();
...to:
$('#' + tbl).remove();
Then the table removes.

Adding a new row to table using Javascript

When the user clicks the add new button a new row should be added to the bottom of the table, but when I click the button, nothing happens. The script looks fine to me and I've tried to find a solution for hours.
function addRow(tableID) {
var table = document.getElementById(tableID),
row = tbl.insertRow(tbl.rows.length),
i;
for (i = 0; i < table.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'row');
}
}
<head>
<style>
table, th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table id="countries">
<thead>
<tr>
<th>Country</td>
<th>Code</td>
</tr>
</thead>
<tbody>
<tr>
<td>Algeria</td>
<td>213</td>
</tr>
</tbody>
</table>
<button type="button" onclick="addRow('countries');">Add New</button>
</body>

You can try this :
function addRow(tableID) {
var table = document.getElementById(tableID),
row = table.insertRow(table.rows.length),
i;
for (i = 0; i < table.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'row');
}
}
function createCell(cell, text, style) {
var div = document.createElement('div'),
txt = document.createTextNode(text);
div.appendChild(txt);
div.setAttribute('class', style);
div.setAttribute('className', style);
cell.appendChild(div);
}
<html>
<title>Test</title>
<head>
<style>
table, th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table id="countries">
<thead>
<tr>
<th>Country</td>
<th>Code</td>
</tr>
</thead>
<tbody>
<tr>
<td>Algeria</td>
<td>213</td>
</tr>
</tbody>
</table>
<button type="button" onclick="addRow('countries');">Add New</button>
</body>
</html>

You can done this with very little code using JQuery. check below code here :-
$(document).ready(function(){
$(".add").click(function(){
$("#countries tbody tr:last-child").after("<tr><td>Data</td><td>data</td></tr>")
});
});
table, th, td{
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="countries">
<thead>
<tr>
<th>Country</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Algeria</td>
<td>213</td>
</tr>
</tbody>
</table>
<button class="add" type="button">Add New</button>

I hope that this is what you are looking for,
<script>
function addRow(tableID) {
var table = document.getElementById(tableID); // get tableById
var rowCount = table.rows.length; // get row count
var cellCount = table.rows[0].cells.length; // get cell count
var row = table.insertRow(rowCount); // create row
for(var i =0; i <= cellCount; i++){
createCell(row.insertCell(i), i, 'row');
}
}
</script>

Develop Reference

JavaScript is the programming language of the Web.

Adding HTML table rows and columns using Javascript Array , not working - javascript

Related

How to show JSON response in datatable using JavaScript [duplicate]

Moving data from one html table to another

Change inner txt of table

Delete Dynamic HTML table using table id?

Adding a new row to table using Javascript

Categories

Resources