How to insert dynamic string into HTML [duplicate] - javascript
This question already has answers here:
How to render HTML in string with Javascript?
(5 answers)
Closed 2 years ago.
I am trying to make a JS function that takes a JS array and uses the content to make an HTML table but when I try to use the code, the table doesn't show on my Website. This is the function that I am using and I tried calling the function using a button:
<input type = "button" onclick = "makeTableHTML()" value = "Display">
<script>
function makeTableHTML() {
var result = "<table class=\"table table-bordered table-striped\">";
result += "<thead>";
result += "<tr>";
result += "<th>RIF</th>";
result += "<th>Nombre</th>";
result += "</tr>";
result += "</thead>";
result += "<tbody id=\"myTable\">";
for(var i=0; i<arreglo_rif.length; i++) {
result += "<tr>";
result += "<td>"+arreglo_rif[i]+"</td>";
result += "<td>"+arreglo_nombre[i]+"</td>";
result += "</tr>";
}
result += "</tbody>";
result += "</table>";
console.log(result);
return result;
}
</script>
but when I click on the button the table doesn't show either.
var arreglo_rif=['one','two','three']
var arreglo_nombre=[1,2,3]
function makeTableHTML() {
var result = "<table class=\"table table-bordered table-striped\">";
result += "<thead>";
result += "<tr>";
result += "<th>RIF</th>";
result += "<th>Nombre</th>";
result += "</tr>";
result += "</thead>";
result += "<tbody id=\"myTable\">";
for(var i=0; i<arreglo_rif.length; i++) {
result += "<tr>";
result += "<td>"+arreglo_rif[i]+"</td>";
result += "<td>"+arreglo_nombre[i]+"</td>";
result += "</tr>";
}
result += "</tbody>";
result += "</table>";
document.getElementById('container').innerHTML = result;
}
<input type = "button" onclick = "makeTableHTML()" value = "Display">
<div id='container'></div>
Related
Load CSV file data into HTML table
I am trying to load data from an csv file to an html file and I want to have it displayed in a table.
My idea was to open the csv data and split it with this code in table rows and and then the cells for the rows.
This is my code so far. Maybe you can help me with what's wrong?
I am thankful for any idea!
<body>
<script src="jquery.min.js"></script>
<script>
function readCsv(data) {
var allRows = data.split(/\r?\n|\r/);
var table = "<table>";
for (var singleRow = 0; singleRow < allRows - length; singleRow++) {
if (singleRow === 0) {
table += "<thead>";
table += "<tr>";
} else {
table += "<tr>";
}
var rowCells = allRows[singleRow].split(',');
for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
if (singleRow === 0) {
table += "<th>";
table += rowCells[rowCell];
table += "</th>";
} else {
table += "<td>";
table += rowCells[rowCell];
table += "</td>";
}
if (singleRow === 0) {
table += "</tr>";
table += "</thead>";
table += "<tbody>";
} else {
table += "</tr>";
}
}
table += "</tbody>";
table += "</table>";
$("body").append(table);
}
$.ajax({
url: "world_data_v1.csv",
dataType: "text"
}).done(readCsv);
}
</script>
</body>
</html>
Your $.ajax should be outside readCsv and inside a $(document).(ready)
Generate HTML table and load it in div element
I'd like to load a HTML table into a div-element (id="resultDataDistancesTable") - but the generated string isn't processed (no matter if I use html(), append() or innerHTML). There is no error in the console.
When I paste the console.log(..) output directly to the HTML page I get the table that I want - so why doesn't my JavaScript code work? Is something wrong with the string?
var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]};
buildResultTableDistances();
function buildResultTableDistances() {
var tbl;
var tr_head = "<table><tr><td>distances [meters]</td>";
for (var i = 0; i < 20; i++) {
tr_head += "<td><b>" + "dummy" + "</b></td>";
}
tr_head += "</tr>";
tbl = tr_head;
for (var i = 0; i < 20; i++) {
var row = "<tr><td><b>" + "dummy" + "</b></td>";
for (var ii = 0; ii < 20; ii++) {
row += "<td>" + response.distances[i][ii] + "</td>";
}
row += "</tr>";
tbl += row;
}
tbl += "</table>";
console.log(tbl);
$('#resultDataDistancesTable').html(tbl);
}
I suspect you forgot to insert the HTML or including jQuery, because it works fine here. If you want, to do this solely in JavaScript by adding the element in jQuery:
$(document.body).append('<div id="resultDataDistancesTable"></div>');
var response = {"distances":[[0,4569,17264,6074,4986,12430,10936,11729,11280,23714,19112,24070,24974,25809,24157,27636,27323,15690,27970,22152],[4837,0,9160,1879,1872,12492,10755,15237,14468,21251,16649,17650,20574,23346,21694,31144,30831,13227,23141,19689],[17807,9681,0,8419,14314,25164,23427,28206,27140,11709,17204,18205,21130,23901,22249,30219,29906,4147,23696,10294],[6156,1736,8271,0,3191,12812,8437,16555,14788,22085,17483,18484,21408,24180,22528,30498,30185,14061,23975,20523],[5438,1642,14335,3147,0,12796,11058,15838,14771,20785,16183,17184,20108,22880,21228,31745,31432,12761,22674,19223],[12266,13371,25607,10970,13329,0,1842,20750,6094,32057,27455,28455,31380,34152,32500,37248,36935,24033,37581,30495],[10434,11651,16093,8428,11608,1842,0,19509,7092,30336,25734,26735,29659,32431,30779,35416,35104,22312,35750,28774],[12355,15633,28328,17138,16050,19963,20849,0,6457,34778,30176,26719,27624,33122,31702,30285,29973,26754,30619,33216],[11054,14433,26669,14776,14391,6088,9450,10828,0,33119,28517,36279,37184,35214,33562,39846,39533,25095,40179,31557],[21936,20085,11649,19803,18444,29293,27556,32335,31269,0,2943,8201,8702,10694,9042,17012,16699,8876,11268,5269],[19141,17291,16426,17009,15649,26499,24762,29541,28475,2924,0,5407,6515,9365,7713,15683,15370,14852,9082,6033],[22777,19065,18201,18783,17424,28274,26536,25758,31348,8188,5556,0,2979,5144,6115,10994,10681,16626,5493,10239],[23722,21760,20895,21478,20118,30968,29231,26703,32292,8634,6627,2994,0,2715,3388,4505,4192,19321,3110,11521],[29801,24947,24082,24665,23305,34155,32417,32782,38371,9673,8179,5136,2704,0,2345,4277,3964,22508,1703,15331],[25139,23289,22424,23007,21647,32497,30760,30797,34473,8016,6521,6129,3394,2340,0,5174,4862,20850,3779,13673],[26964,30242,30040,31748,30660,36952,35458,29945,35534,16511,10598,10365,4526,4274,5182,0,336,28466,1821,15492],[26628,29906,29704,31412,30324,36616,35122,29609,35198,16175,10262,10029,4190,3938,4846,313,0,28130,1485,15156],[16108,9772,4136,13975,12616,23466,21728,26507,25441,8931,10916,11916,14841,17613,15961,23930,23617,0,17407,7516],[27163,30441,23429,24012,22653,37151,35657,30144,35733,11168,9161,5495,3089,1703,3746,1686,1373,21855,0,14055],[22592,20741,10188,20459,19100,29949,28212,32991,31925,5369,5909,10225,11565,14414,12762,20732,20419,7415,14131,0]]};
buildResultTableDistances();
function buildResultTableDistances() {
var tbl;
var tr_head = "<table><tr><td>distances [meters]</td>";
for (var i = 0; i < 20; i++) {
tr_head += "<td><b>" + "dummy" + "</b></td>";
}
tr_head += "</tr>";
tbl = tr_head;
for (var i = 0; i < 20; i++) {
var row = "<tr><td><b>" + "dummy" + "</b></td>";
for (var ii = 0; ii < 20; ii++) {
row += "<td>" + response.distances[i][ii] + "</td>";
}
row += "</tr>";
tbl += row;
}
tbl += "</table>";
$('#resultDataDistancesTable').html(tbl);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultDataDistancesTable"></div>
I could replicate your issue using Plunker: http://plnkr.co/edit/QxklTx0R6WcYwpRIpd98 has the fix. You weren't waiting for the DOM to be loaded before attempting to append to the object. See line 3:
$("document").ready(function() {
buildResultTableDistances();
});
Should work then.
I might've overdosed innerHTML and get undefined
function promptuj() {
this.x = prompt("How big should be your multiplication table?");
document.getElementById("keks").innerHTML = tabliczka(this.x);
}
function tabliczka() {
document.getElementById("keks").innerHTML += "<table border=\"1\">";
for (i = 1; i <= this.x; i++) {
document.getElementById("keks").innerHTML += "<tr><td>" + i + "</td>";
for (j = 1; j <= this.x; j++) {
if (j != 1) {
document.getElementById("keks").innerHTML += "<td>" + j * i + "</td>";
}
}
document.getElementById("keks").innerHTML += "</tr>";
}
document.getElementById("keks").innerHTML += "</table>";
}
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" onclick="promptuj()" value="Promptonto" />
<div id="keks"></div>
</html>
This short thingie is for multiplication table with prompt button, asking how big should it be. But giving it any number returns undefined instead of a table.
Before that I had document.write(whatever) instead of document.getElementById("keks").innerHTML += and it worked.
EDIT: I noticed I didn't close <body> but it didn't help.
You get undefined because in promptuj you set the innerHTML to the value returned by tabliczka. But tabliczka doesn't explicitly return anything, so it's like it returned undefined.
Instead, tabliczka should return the HTML string to be set as the innerHTML.
Moreover, never use .innerHTML +=. Concatenate strings first, and assign innerHTML at the end. If you use .innerHTML = "<table>", the parser will automatically close the table, without waiting for your .innerHTML += "</table>". Then the contents will be inserted outside the table. And not relevant here, but .innerHTML += also removes internal data, e.g. event listeners.
function promptuj() {
var x = prompt("How big should be your multiplication table?");
document.getElementById("keks").innerHTML = tabliczka(x);
}
function tabliczka(x) {
var str = "<table>";
for (var i=1; i<=x; i++) {
str += "<tr>";
for (var j=1; j<=x; j++) {
str += "<td>" + j*i + "</td>";
}
str += "</tr>";
}
str += "</table>";
return str;
}
table {
border-collapse: collapse;
}
td {
text-align: center;
border: 1px solid;
}
<input type="button" onclick="promptuj()" value="Promptonto" />
<div id="keks"></div>
Try something like:
<script type="text/javascript">
function promptuj() {
window.x=prompt("How big should be your multiplication table?");
document.getElementById("keks").innerHTML = tabliczka(window.x);
}
function tabliczka(x) {
var htmlString = "";
htmlString += "<table border=\"1\">";
for (i=1; i<=window.x; i++) {
htmlString += "<tr><td>" + i + "</td>";
for (j=1; j<= x; j++) {
if (j!=1) {
htmlString += "<td>" + j*i + "</td>";
}
}
htmlString += "</tr>";
}
htmlString += "</table>";
return htmlString;
}
</script>
You saw undefined, because your tabliczka function originally returned nothing, so javascript implicitly returned undefined from the call to it (this is how javascript works).
So basically, even if tabliczka was correct, it did the innerHTML changes to your "keks" div and returned so the promptuj function did the final .innerHTML to "keks" with the result of tabliczka which was undefined.
It just happened so fast that you just saw undefined from what I can tell.
Why is nan being added to data?
I make an ajax call to a servlet which sends JSON data. I parse it with JSON.parse() and put it into a string to display in table tag in html. But with every row cell data it is showing NaN. I have checked the data there is no NaN.
Here's the code.
var dataFromJSON = JSON.parse(result);
var count = dataFromJSON.count;
var str = "<table id='customers'><tr><th>LOGGED DATE</th></tr>";
for (var i = 0; i < count; i++) {
str += "<tr><td>" + dataFromJSON.records[i].common.logged_date +
+"</td>";
str += "</tr>";
}
str += "</table>";
$("#data").html(str);
The data in dataFromJSON.records[i].common.logged_date is 2016-02-23 10:11:43, but the table shows 2016-02-23 10:11:43NaN.
Please help.
Here: str += "<tr><td>" + dataFromJSON.records[i].common.logged_date+ + "</td>"; You have two + right after another. The browser tries to interpret this whitespace as a number Remove one of the +.
You have put ++ please use only +
var dataFromJSON = JSON.parse(result);
var count = dataFromJSON.count;
var str = "<table id='customers'><tr><th>LOGGED DATE</th></tr>";
for (var i = 0; i < count; i++) {
str += "<tr><td>" + dataFromJSON.records[i].common.logged_date +"</td>"; //chnage here
str += "</tr>";
}
str += "</table>";
$("#data").html(str);
core:forEach in javascript
I have this code to display details from database to jsp. I'm using core:forEach to sort through the list of results.But now inorder to simplify jsp code I'm implementing the core:forEach in javascript.And I'm displaying the results in a dynamically created table. But now while using core:forEach in javascript, only the last value in the list is getting displayed. Code is as follows.
window.onload = function CreateTable()
{
<core:forEach items="${requestScope.projectWiseDetails}" var="row">; //first list sorting based on project name
var tablecontents = "";
tablecontents = "<table>"; //dynamic table
tablecontents += "<tr>";
tablecontents += "<td>" + "Resource Name" + "</td>";
tablecontents += "</tr>";
<core:forEach items="${row.onsite3to5YearsList}" var="resource"> //second sorting which comes under project name
tablecontents += "<tr>";
tablecontents += "<td>" +<core:out value="${resource.resourceName}"></core:out>+ "</td>";
</core:forEach>
tablecontents += "</tr>";
tablecontents += "</table>";
</core:forEach>
document.getElementById("tablespace").innerHTML = tablecontents; //attaching the table to an element
}
<p id="tablespace"></p> //This is where the table gets generated
You're overriding tablecontents everytime, take var tablecontents = "" outside the loop, then replace tablecontents = "<table>" with tablecontents += "<table>".
window.onload = function CreateTable()
{
var tablecontents = "";
<core:forEach items="${requestScope.projectWiseDetails}" var="row">; //first list
tablecontents += "<table>";
// The rest of your code