We Keep Coding

How can I make a tableRow tappable? I've watched online but it didn't work

I would like to open a new page when I tap a cell (TR) in Javascript. I've searched a lot of tutorials online but it doesn't work as well. I hope that someone could help me. Thanks.
Here is my code:
function generateTableBirre()
{
//Build an array containing Customer records.
var birre = ["Heineken", "Nastro Azzurro", "Bjørne", "Leffe", "Peroni"];
var price = ["3,00$", "1,00$", "3,00$", "2,00$", "4,50$"];
//Create a HTML Table element.
var table = document.createElement("Table");
table.border = "1";
table.className = "Birre";
table.cellSpacing = 20;
//Add the data rows.
for (var i = 0; i < birre.length; i++) {
row = table.insertRow(-1);
var cell = row.insertCell(-1);
var generalDiv = document.createElement("div");
generalDiv.className = "General-Div";
// Create an a tag
var a = document.createElement('a');
a.href = "Antipasti.html";
a.appendChild(cell);
cell.appendChild(a);
var div = document.createElement("div");
div.id = "div-nome-prezzo-birre";
var nameprezzo = document.createElement("p");
nameprezzo.innerHTML = birre[i] + ' - ' + price[i];
nameprezzo.id = "nome-prezzo-birre";
div.appendChild(nameprezzo);
var image = document.createElement("img");
image.src = "https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png"
image.id = "image-bibite";
generalDiv.appendChild(div);
generalDiv.appendChild(image);
cell.appendChild(generalDiv);
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
If you would like to show the table, here is the image:

In the Javascript below the table is created with 2 cells per row. In the first cell you'll find a div with a text paragraph. In the second cell you'll find a div with anchor and image.
Important: an id must be unique so I had to remove lines where duplicate id's were created. If you want to use extra selectors then you can use classList.add("...")
In the css you can style the image width, font, color, etc. For example #dvTable img { max-width: 250px; height: auto; border: 0; }
function generateTableBirre() {
// array containing records
var birre = ["Heineken", "Nastro Azzurro", "Bjørne", "Leffe", "Peroni"];
var price = ["3,00$", "1,00$", "3,00$", "2,00$", "4,50$"];
// create table
var table = document.createElement('table');
table.classList.add("Birre");
table.setAttribute('border', '1');
table.setAttribute('cellspacing', '20');
// loop through the array and create rows
for (var i = 0; i < birre.length; i++) {
var row = document.createElement('tr');
// loop from 0 to 1 to create two cells on each row
for (var j = 0; j < 2; j++) {
var cell = document.createElement('td');
// give each cell a inner div
var div = document.createElement("div");
div.classList.add("General-Div");
cell.appendChild(div);
// different content in cell 0 and cell 1
if (j == 0) {
// cell 0 contains paragraph
var par = document.createElement("p");
par.innerHTML = birre[i] + ' - ' + price[i];
div.appendChild(par);
} else {
// cell 1 contains image in an anchor
var anch = document.createElement('a');
anch.setAttribute('href', 'Antipasti.html');
div.appendChild(anch);
var img = document.createElement("img");
img.setAttribute('src', 'https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png');
anch.appendChild(img);
}
row.appendChild(cell);
}
table.appendChild(row);
}
// append table in id=dvTable
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
generateTableBirre();
<div id="dvTable">
</div>

try this,
function generateTableBirre() {
//Build an array containing Customer records.
var birre = ["Heineken", "Nastro Azzurro", "Bjørne", "Leffe", "Peroni"];
var price = ["3,00$", "1,00$", "3,00$", "2,00$", "4,50$"];
//Create a HTML Table element.
var table = document.createElement("table");
table.border = "1";
table.className = "Birre";
table.cellSpacing = 20;
//Add the data rows.
for (var i = 0; i < birre.length; i++) {
//var row = table.insertRow(-1);
//var cell = row.insertCell(-1);
var row = document.createElement("tr");
table.appendChild(row);
var cell = document.createElement("td");
var generalDiv = document.createElement("div");
generalDiv.className = "General-Div";
// Create an a tag
var a = document.createElement('a');
a.href = "Antipasti.html";
a.appendChild(cell);
row.appendChild(a);
var div = document.createElement("div");
div.id = "div-nome-prezzo-birre";
var nameprezzo = document.createElement("p");
nameprezzo.innerHTML = birre[i] + ' - ' + price[i];
nameprezzo.id = "nome-prezzo-birre";
div.appendChild(nameprezzo);
var image = document.createElement("img");
image.src = "https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png"
image.id = "image-bibite";
generalDiv.appendChild(div);
generalDiv.appendChild(image);
cell.appendChild(generalDiv);
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}

Tables not coming in center of div

I am trying to create 3 tables by Javascript inside a div and then put them inside HTML of an existing div. Please find the entire code here:
https://jsfiddle.net/s78n3dfe/
HTML File
<div id = "tldr">
</div>
Javascript File
map1 = [["label1", 30], ["label2", 70]];
total1 = 100;
title1 = "dasdas";
var table1 = createTable(map1, total1, title1);
var table2 = createTable(map1, total1, title1);
var table3 = createTable(map1, total1, title1);
var divNode = document.createElement('div');
divNode.setAttribute("id", "labelInfo");
divNode.appendChild(table1);
divNode.appendChild(table3);
divNode.appendChild(table2);
var tldr = document.getElementById('tldr');
tldr.appendChild(divNode);
function createTable(map, total, title) {
var table = document.createElement('table');
table.setAttribute("class", "table");
table.classList.add("table-striped");
// table.setAttribute("class", "table-striped");
table.setAttribute("style", "display: inline-block; width:33%;");
var caption = table.createCaption();
caption.setAttribute("style", "text-align: center;")
caption.innerHTML = title.toString().bold();
var header = table.createTHead();
var firstRow = header.insertRow(0);
var header1 = firstRow.insertCell(0);
var header2 = firstRow.insertCell(1);
header1.innerHTML = "Label".bold();
header2.innerHTML = "Allocation".bold();
var tblBody1 = document.createElement("tbody");
tblBody1.setAttribute('class', 'percentageBody');
tblBody1.setAttribute('style', 'display:block; border-top: 0px;');
table.appendChild(tblBody1);
for(label in map) {
var row = document.createElement("tr");
var labelCell = row.insertCell(0);
var percentCell = row.insertCell(1);
labelCell.innerHTML = map[label][0].bold();
percentCell.innerHTML = map[label][1].toString().concat(" %");
tblBody1.appendChild(row);
}
var tblBody2 = document.createElement("tbody");
tblBody2.setAttribute('class', 'valueBody');
tblBody2.setAttribute('style', 'display:none; border-top: 0px;');
table.appendChild(tblBody2);
for(label in map) {
var row = document.createElement("tr");
var labelCell = row.insertCell(0);
var percentCell = row.insertCell(1);
labelCell.innerHTML = (map[label][0]).bold();
percentCell.innerHTML = (map[label][1]/100 * total).toFixed(0).toString();
tblBody2.appendChild(row);
}
return table;
}
The problem I am facing is that tables are coming towards the left side of the div and not coming in the center. How can I make them come in the center?

Please check below Code:
Remove Inline-block from table's CSS:

For 2 dynamically generated TD

Right now the following code generates two much white spaces between the two TDs.
How to set the first TD left aligned and
the second TD left aligned to the first TD?
// nTR being the newly TR
nTR.setAttribute('style','td {padding: 10px}') has no effect. How to go about it?
// creating row and creating all cells
// creates a table row
var newrow = document.createElement("tr");
newrow.setAttribute('style','td {padding: 10px}');
// cell 1
var cell = document.createElement("td");
cell.colSpan = "2";
// cell.setAttribute('style','padding: 10px');
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'fLabel';
cellText.name = 'fLabel';
cellText.size = "20";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 2
var cell = document.createElement("td");
cell.colSpan = "3";
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'fValue';
cellText.name = 'fValue';
cellText.size = "80";
cell.appendChild(cellText);
newrow.appendChild(cell);
// code to append the new TR to table
// ...
Thanks.

Bootstrap Table not appearing correctly

I am using JavaScript to loop through some data and build a number of tables and am using Bootstrap with the class table table-hover. This works absolutely fine on all tables except the very last table to be produced. The bottom table is always sqashed and the hover over doesn't work. The columns resize to the correct size but that's about it.
I can't work it out, both tables have the class declared:
No matter how many tables are made it always happens on the very last table. I should point out that I've tried everything I can think of including adding a dummy table within the loop and the last interation but then that makes two squashed tables then.
Update: http://jsfiddle.net/si828/1ksyces5/8/
Code:
$('#tableContainer').empty();
var div = document.getElementById('tableContainer');
for (var i = 0; i < data.length; i++)
{
div.innerHTML = div.innerHTML;
var para = document.createElement("p");
var logo = document.createElement("a");
logo.setAttribute('class', 'glyphicon glyphicon-user');
para.appendChild(logo);
var node = document.createTextNode(" " + data[i].userName + " (" + data[i].userID + ") " );
para.appendChild(node);
var aTag = document.createElement("a");
aTag.setAttribute('data-id-proxy' , data[i].userID);
aTag.setAttribute('class' , 'open-AddUserModal');
aTag.setAttribute('href' ,'#addUserModal');
var span = document.createElement("span");
span.setAttribute('class', 'glyphicon glyphicon-plus');
aTag.appendChild(span);
para.appendChild(node);
para.appendChild(aTag);
para.setAttribute('class', 'text-primary');
div.appendChild(para);
var table = document.createElement('table'), tr, td, row, cell;
table.setAttribute('class', 'table table-hover');
table.setAttribute('id', 'table' + data[i].userID);
table.setAttribute('border', '1');
var header = table.createTHead();
var row = header.insertRow(0);
var cell = row.insertCell(0);
cell.setAttribute('style' , 'width: 20%');
cell.style.backgroundColor = '#eee';
cell.style.fontWeight = 'bold';
cell.innerHTML = "SRM";
var cell = row.insertCell(1);
cell.setAttribute('style' , 'width: 13%');
cell.style.backgroundColor = '#eee';
cell.style.fontWeight = 'bold';
cell.innerHTML = "Target User";
var cell = row.insertCell(2);
cell.setAttribute('style' , 'width: 20%');
cell.style.backgroundColor = '#eee';
cell.style.fontWeight = 'bold';
cell.innerHTML = "Target User Name";
for (row = 0; row < data[i].targetUsers.length; row++)
{
tr = document.createElement('tr');
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = data[i].targetUsers[row].srm;
table.appendChild(tr);
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = data[i].targetUsers[row].targetUser;
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = data[i].targetUsers[row].targetUserName;
}
document.getElementById('tableContainer').appendChild(table);
}

Based on your JSFiddle, your div.innerHTML = div.innerHTML; on line 10 should be the last statement of your outer for loop (on line 76). Otherwise your table doesn't get a <tbody>, causing bootstrap to malfunction.
Here is the fixed one: http://jsfiddle.net/wsLzk5wq/

If it is only the last table you could add custom css for the last table element by using a child selector.
E.g
HTML:
<div class="parent-container">
<table>
.......
</table>
</div>
CSS:
.parent-container table:last-child {
padding: 10px !important;
.......
}

insert Element into two Div

i am creating table and populate it into two divs, first div is in small size and second one for large view , other graphs works fine but element not working, its populate the last div. as you can see the code and sample here.
$("#sample").empty()
$("#fulls").empty()
var table = document.createElement('table');
table.className="report";
var first = table.insertRow(0);
first.className= "headerTable";
var h1 = first.insertCell(0);
var h2 = first.insertCell(1);
var h3 = first.insertCell(2);
var h4 = first.insertCell(3);
var h5 = first.insertCell(4);
h1.className= "headerTable";
h2.className= "headerTable";
h3.className= "headerTable";
h4.className= "headerTable";
h5.className= "headerTable";
h1.innerHTML = ("Speed");
h2.innerHTML = ("RPM");
h3.innerHTML =("Acc");
h4.innerHTML = ("Brake");
h5.innerHTML =("Dated");
for (var i = 0;i<5;i++)
{
var first = table.insertRow((i+1));
first.className= "tableRow";
var h1 = first.insertCell(0);
var h2 = first.insertCell(1);
var h3 = first.insertCell(2);
var h4 = first.insertCell(3);
var h5 = first.insertCell(4);
h1.innerHTML = i;
h2.innerHTML = i;
h3.innerHTML = i;
h4.innerHTML = i;
h5.innerHTML= new Date();
}
$("#fulls").html(table);
$("#sample").html(table);
and i tried with javascript but same result
document.getElementById("fulls").innerHTML = table;
document.getElementById("sample").innerHTML = table;

You can't insert an element in 2 containers, you need to clone it like
$("#fulls").html($(table).clone());
//or use cloneNode() like $("#fulls").html(table.cloneNode(true));
$("#sample").html(table);
Demo: Fiddle
When you append the same element instance to 2 containers, it is removed from first one and is added to the second one, so if you want to keep a copy in both the places you need to clone that element.

This should work for you
$("#fulls").html(table);
$("#sample").html($("#fulls").html());
The problem was because you had only one table object used in multiple places.

I think you would require something like this
var th = document.createElement('th');
var tr = document.createElement('tr');
var tbody = document.createElement('tbody');
var table = document.createElement('table');
table.className = "report";
th.appendChild(img);
tr.appendChild(th);
tbody.appendChild(tr);
table.appendChild(tbody);