Any alternative to create a dynamic table using JavaScript innerHTML?
I want to create a dynamic table in JSP. The data which has to be entered in the table is coming form an array.
var array = data.split("##");
I am currently planning to insert table in the div by innerHTML
document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column
<tr>... <td>...</td></tr></script>
"</table>";
Do you guys have any better way to tackle this? can I remove script from innerHTML string? thanks for the help in advance
javascript jquery html jsp
|
show 1 more comment
I want to create a dynamic table in JSP. The data which has to be entered in the table is coming form an array.
var array = data.split("##");
I am currently planning to insert table in the div by innerHTML
document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column
<tr>... <td>...</td></tr></script>
"</table>";
Do you guys have any better way to tackle this? can I remove script from innerHTML string? thanks for the help in advance
javascript jquery html jsp
1
Yes, see HTMLTableElement.
– Teemu
Jan 3 at 6:59
@Teemu, Thanks. can you please refer me a code example to go through?
– Ayush
Jan 3 at 7:02
2
There are plenty of examples at MDN, when you're digging deep to the table elements creation.
– Teemu
Jan 3 at 7:04
it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer
– user3678149
Jan 3 at 7:08
@user3678149, it will be great if you can help me with the example.
– Ayush
Jan 3 at 7:10
|
show 1 more comment
I want to create a dynamic table in JSP. The data which has to be entered in the table is coming form an array.
var array = data.split("##");
I am currently planning to insert table in the div by innerHTML
document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column
<tr>... <td>...</td></tr></script>
"</table>";
Do you guys have any better way to tackle this? can I remove script from innerHTML string? thanks for the help in advance
javascript jquery html jsp
I want to create a dynamic table in JSP. The data which has to be entered in the table is coming form an array.
var array = data.split("##");
I am currently planning to insert table in the div by innerHTML
document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column
<tr>... <td>...</td></tr></script>
"</table>";
Do you guys have any better way to tackle this? can I remove script from innerHTML string? thanks for the help in advance
javascript jquery html jsp
javascript jquery html jsp
edited Jan 3 at 7:31
Ayush
asked Jan 3 at 6:56
AyushAyush
859
859
1
Yes, see HTMLTableElement.
– Teemu
Jan 3 at 6:59
@Teemu, Thanks. can you please refer me a code example to go through?
– Ayush
Jan 3 at 7:02
2
There are plenty of examples at MDN, when you're digging deep to the table elements creation.
– Teemu
Jan 3 at 7:04
it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer
– user3678149
Jan 3 at 7:08
@user3678149, it will be great if you can help me with the example.
– Ayush
Jan 3 at 7:10
|
show 1 more comment
1
Yes, see HTMLTableElement.
– Teemu
Jan 3 at 6:59
@Teemu, Thanks. can you please refer me a code example to go through?
– Ayush
Jan 3 at 7:02
2
There are plenty of examples at MDN, when you're digging deep to the table elements creation.
– Teemu
Jan 3 at 7:04
it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer
– user3678149
Jan 3 at 7:08
@user3678149, it will be great if you can help me with the example.
– Ayush
Jan 3 at 7:10
1
1
Yes, see HTMLTableElement.
– Teemu
Jan 3 at 6:59
Yes, see HTMLTableElement.
– Teemu
Jan 3 at 6:59
@Teemu, Thanks. can you please refer me a code example to go through?
– Ayush
Jan 3 at 7:02
@Teemu, Thanks. can you please refer me a code example to go through?
– Ayush
Jan 3 at 7:02
2
2
There are plenty of examples at MDN, when you're digging deep to the table elements creation.
– Teemu
Jan 3 at 7:04
There are plenty of examples at MDN, when you're digging deep to the table elements creation.
– Teemu
Jan 3 at 7:04
it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer
– user3678149
Jan 3 at 7:08
it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer
– user3678149
Jan 3 at 7:08
@user3678149, it will be great if you can help me with the example.
– Ayush
Jan 3 at 7:10
@user3678149, it will be great if you can help me with the example.
– Ayush
Jan 3 at 7:10
|
show 1 more comment
3 Answers
3
active
oldest
votes
you can use <template>
a new tag in HTML5.
I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a
document.querySelector();
using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.
https://www.w3schools.com/tags/tag_template.asp
add a comment |
You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.
- When you invoke
HTMLTableElement#insertRow()
you add a new HTMLTableRowElement - Calling
HTMLTableRowElement#insertCell
adds a new HTMLCellElement
- You can set
textContent
orcreateTextNode
andappendChild
to set the content of the cells. The results are the same - both are options.
// sample data
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how to put the data in the table
var table = document.getElementById("data"); //selected an existing table
fillTable(table, exceptionData);
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
//setting textContent of the cell
var idCell = tableRow.insertCell();
var id = rowData[0];
idCell.textContent = id;
//appending a textNode child to the cell
var typeCell = tableRow.insertCell();
var type = document.createTextNode(rowData[1]);
typeCell.appendChild(type)
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv">
<table id="data">
<tr><th>Exception ID</th><th>Type</th></tr>
</table>
</div>
This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement
and then add it via appendChild
. I've added HTMLTableELement#createTHead
to showcase it but you don't have to do that. I can't find a way to add <th>
elements programmatically from the table API, so I'm using Document#createElement
to make them as well - the <thead>
is a nice addition but non-essential to how a table would be rendered.
// sample data
var tableConfig = ["Exception ID", "Type"];
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
var table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
var table = document.createElement("table");
var tHead = table.createTHead();
var headerRow = tHead.insertRow();
for(var i = 0; i < config.length; i++) {
var th = document.createElement("th");
th.textContent = config[i];
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
for(var j = 0; j < rowData.length; j++) {
tableRow.insertCell().textContent = rowData[j]; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.
Finally, here is the second example re-written in ES6 mainly to avoid the plain for
loops in favour of for...of
loops.
// sample data
const tableConfig = ["Exception ID", "Type"];
const exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
const table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
const table = document.createElement("table");
const tHead = table.createTHead();
const headerRow = tHead.insertRow();
for(header of config) {
const th = document.createElement("th");
th.textContent = header;
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (rowData of data) {
const tableRow = table.insertRow();
for(cellData of rowData) {
tableRow.insertCell().textContent = cellData; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
add a comment |
Ok you have array of objects, you want to show data in table right. Then follow below code.
In JSP page write empty table with header.
<table id="tableID">
<thead>
<th>Header</th>
<thead>
<tbody>
</tbody>
</table>
In JS file write below
var text = ""
var i;
for (i = 0; i < array.length; i++) {
text += <tr><td>array[ i ]</td></tr>;
}
$('#tableID').find('tbody').html(text); // Jquery
Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.
– Ayush
Jan 3 at 7:30
Then use DataTable concept . It's give lot of futures also .
– user3678149
Jan 3 at 7:32
for that I have to create a table first.
– Ayush
Jan 3 at 7:38
the new edit seems to be optimized, let me try that, will update you soon.
– Ayush
Jan 3 at 7:50
@Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM
– VLAZ
Jan 3 at 7:56
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017634%2fany-alternative-to-create-a-dynamic-table-using-javascript-innerhtml%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
you can use <template>
a new tag in HTML5.
I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a
document.querySelector();
using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.
https://www.w3schools.com/tags/tag_template.asp
add a comment |
you can use <template>
a new tag in HTML5.
I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a
document.querySelector();
using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.
https://www.w3schools.com/tags/tag_template.asp
add a comment |
you can use <template>
a new tag in HTML5.
I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a
document.querySelector();
using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.
https://www.w3schools.com/tags/tag_template.asp
you can use <template>
a new tag in HTML5.
I don't know the structure of your rows but you only need to write your HTML code of the rows into the template and add some names or classes for the cells to use in a
document.querySelector();
using a foreach with your array and the template you can append child nodes into the tbody of your table. in the link below explain better who to use templates.
https://www.w3schools.com/tags/tag_template.asp
answered Jan 3 at 7:06
Matthew Montes de OcaMatthew Montes de Oca
1
1
add a comment |
add a comment |
You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.
- When you invoke
HTMLTableElement#insertRow()
you add a new HTMLTableRowElement - Calling
HTMLTableRowElement#insertCell
adds a new HTMLCellElement
- You can set
textContent
orcreateTextNode
andappendChild
to set the content of the cells. The results are the same - both are options.
// sample data
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how to put the data in the table
var table = document.getElementById("data"); //selected an existing table
fillTable(table, exceptionData);
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
//setting textContent of the cell
var idCell = tableRow.insertCell();
var id = rowData[0];
idCell.textContent = id;
//appending a textNode child to the cell
var typeCell = tableRow.insertCell();
var type = document.createTextNode(rowData[1]);
typeCell.appendChild(type)
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv">
<table id="data">
<tr><th>Exception ID</th><th>Type</th></tr>
</table>
</div>
This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement
and then add it via appendChild
. I've added HTMLTableELement#createTHead
to showcase it but you don't have to do that. I can't find a way to add <th>
elements programmatically from the table API, so I'm using Document#createElement
to make them as well - the <thead>
is a nice addition but non-essential to how a table would be rendered.
// sample data
var tableConfig = ["Exception ID", "Type"];
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
var table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
var table = document.createElement("table");
var tHead = table.createTHead();
var headerRow = tHead.insertRow();
for(var i = 0; i < config.length; i++) {
var th = document.createElement("th");
th.textContent = config[i];
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
for(var j = 0; j < rowData.length; j++) {
tableRow.insertCell().textContent = rowData[j]; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.
Finally, here is the second example re-written in ES6 mainly to avoid the plain for
loops in favour of for...of
loops.
// sample data
const tableConfig = ["Exception ID", "Type"];
const exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
const table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
const table = document.createElement("table");
const tHead = table.createTHead();
const headerRow = tHead.insertRow();
for(header of config) {
const th = document.createElement("th");
th.textContent = header;
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (rowData of data) {
const tableRow = table.insertRow();
for(cellData of rowData) {
tableRow.insertCell().textContent = cellData; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
add a comment |
You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.
- When you invoke
HTMLTableElement#insertRow()
you add a new HTMLTableRowElement - Calling
HTMLTableRowElement#insertCell
adds a new HTMLCellElement
- You can set
textContent
orcreateTextNode
andappendChild
to set the content of the cells. The results are the same - both are options.
// sample data
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how to put the data in the table
var table = document.getElementById("data"); //selected an existing table
fillTable(table, exceptionData);
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
//setting textContent of the cell
var idCell = tableRow.insertCell();
var id = rowData[0];
idCell.textContent = id;
//appending a textNode child to the cell
var typeCell = tableRow.insertCell();
var type = document.createTextNode(rowData[1]);
typeCell.appendChild(type)
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv">
<table id="data">
<tr><th>Exception ID</th><th>Type</th></tr>
</table>
</div>
This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement
and then add it via appendChild
. I've added HTMLTableELement#createTHead
to showcase it but you don't have to do that. I can't find a way to add <th>
elements programmatically from the table API, so I'm using Document#createElement
to make them as well - the <thead>
is a nice addition but non-essential to how a table would be rendered.
// sample data
var tableConfig = ["Exception ID", "Type"];
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
var table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
var table = document.createElement("table");
var tHead = table.createTHead();
var headerRow = tHead.insertRow();
for(var i = 0; i < config.length; i++) {
var th = document.createElement("th");
th.textContent = config[i];
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
for(var j = 0; j < rowData.length; j++) {
tableRow.insertCell().textContent = rowData[j]; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.
Finally, here is the second example re-written in ES6 mainly to avoid the plain for
loops in favour of for...of
loops.
// sample data
const tableConfig = ["Exception ID", "Type"];
const exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
const table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
const table = document.createElement("table");
const tHead = table.createTHead();
const headerRow = tHead.insertRow();
for(header of config) {
const th = document.createElement("th");
th.textContent = header;
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (rowData of data) {
const tableRow = table.insertRow();
for(cellData of rowData) {
tableRow.insertCell().textContent = cellData; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
add a comment |
You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.
- When you invoke
HTMLTableElement#insertRow()
you add a new HTMLTableRowElement - Calling
HTMLTableRowElement#insertCell
adds a new HTMLCellElement
- You can set
textContent
orcreateTextNode
andappendChild
to set the content of the cells. The results are the same - both are options.
// sample data
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how to put the data in the table
var table = document.getElementById("data"); //selected an existing table
fillTable(table, exceptionData);
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
//setting textContent of the cell
var idCell = tableRow.insertCell();
var id = rowData[0];
idCell.textContent = id;
//appending a textNode child to the cell
var typeCell = tableRow.insertCell();
var type = document.createTextNode(rowData[1]);
typeCell.appendChild(type)
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv">
<table id="data">
<tr><th>Exception ID</th><th>Type</th></tr>
</table>
</div>
This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement
and then add it via appendChild
. I've added HTMLTableELement#createTHead
to showcase it but you don't have to do that. I can't find a way to add <th>
elements programmatically from the table API, so I'm using Document#createElement
to make them as well - the <thead>
is a nice addition but non-essential to how a table would be rendered.
// sample data
var tableConfig = ["Exception ID", "Type"];
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
var table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
var table = document.createElement("table");
var tHead = table.createTHead();
var headerRow = tHead.insertRow();
for(var i = 0; i < config.length; i++) {
var th = document.createElement("th");
th.textContent = config[i];
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
for(var j = 0; j < rowData.length; j++) {
tableRow.insertCell().textContent = rowData[j]; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.
Finally, here is the second example re-written in ES6 mainly to avoid the plain for
loops in favour of for...of
loops.
// sample data
const tableConfig = ["Exception ID", "Type"];
const exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
const table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
const table = document.createElement("table");
const tHead = table.createTHead();
const headerRow = tHead.insertRow();
for(header of config) {
const th = document.createElement("th");
th.textContent = header;
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (rowData of data) {
const tableRow = table.insertRow();
for(cellData of rowData) {
tableRow.insertCell().textContent = cellData; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
You can avoid the need to generate HTML in a string and then add it manually to the page by manipulating the HTMLTableElement directly via JavaScript.
- When you invoke
HTMLTableElement#insertRow()
you add a new HTMLTableRowElement - Calling
HTMLTableRowElement#insertCell
adds a new HTMLCellElement
- You can set
textContent
orcreateTextNode
andappendChild
to set the content of the cells. The results are the same - both are options.
// sample data
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how to put the data in the table
var table = document.getElementById("data"); //selected an existing table
fillTable(table, exceptionData);
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
//setting textContent of the cell
var idCell = tableRow.insertCell();
var id = rowData[0];
idCell.textContent = id;
//appending a textNode child to the cell
var typeCell = tableRow.insertCell();
var type = document.createTextNode(rowData[1]);
typeCell.appendChild(type)
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv">
<table id="data">
<tr><th>Exception ID</th><th>Type</th></tr>
</table>
</div>
This works if you already have a table. If you want to create a table in-memory, then you can also do that using Document#createElement
and then add it via appendChild
. I've added HTMLTableELement#createTHead
to showcase it but you don't have to do that. I can't find a way to add <th>
elements programmatically from the table API, so I'm using Document#createElement
to make them as well - the <thead>
is a nice addition but non-essential to how a table would be rendered.
// sample data
var tableConfig = ["Exception ID", "Type"];
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
var table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
var table = document.createElement("table");
var tHead = table.createTHead();
var headerRow = tHead.insertRow();
for(var i = 0; i < config.length; i++) {
var th = document.createElement("th");
th.textContent = config[i];
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
for(var j = 0; j < rowData.length; j++) {
tableRow.insertCell().textContent = rowData[j]; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
Creating the table in-memory and then appending it has the advantage of minimising the browser reflow which will occur if you update the table a lot. In the first example the table would have triggered a reflow for adding a row, adding a cell, adding data to the cell and each could be potentially expensive. With a large dataset, it could lead to really bad performance. If you create the table outside the DOM and then attach it, this will trigger a single reflow which, even if expensive, is much better than many times that.
Finally, here is the second example re-written in ES6 mainly to avoid the plain for
loops in favour of for...of
loops.
// sample data
const tableConfig = ["Exception ID", "Type"];
const exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
const table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
const table = document.createElement("table");
const tHead = table.createTHead();
const headerRow = tHead.insertRow();
for(header of config) {
const th = document.createElement("th");
th.textContent = header;
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (rowData of data) {
const tableRow = table.insertRow();
for(cellData of rowData) {
tableRow.insertCell().textContent = cellData; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
// sample data
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how to put the data in the table
var table = document.getElementById("data"); //selected an existing table
fillTable(table, exceptionData);
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
//setting textContent of the cell
var idCell = tableRow.insertCell();
var id = rowData[0];
idCell.textContent = id;
//appending a textNode child to the cell
var typeCell = tableRow.insertCell();
var type = document.createTextNode(rowData[1]);
typeCell.appendChild(type)
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv">
<table id="data">
<tr><th>Exception ID</th><th>Type</th></tr>
</table>
</div>
// sample data
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how to put the data in the table
var table = document.getElementById("data"); //selected an existing table
fillTable(table, exceptionData);
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
//setting textContent of the cell
var idCell = tableRow.insertCell();
var id = rowData[0];
idCell.textContent = id;
//appending a textNode child to the cell
var typeCell = tableRow.insertCell();
var type = document.createTextNode(rowData[1]);
typeCell.appendChild(type)
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv">
<table id="data">
<tr><th>Exception ID</th><th>Type</th></tr>
</table>
</div>
// sample data
var tableConfig = ["Exception ID", "Type"];
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
var table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
var table = document.createElement("table");
var tHead = table.createTHead();
var headerRow = tHead.insertRow();
for(var i = 0; i < config.length; i++) {
var th = document.createElement("th");
th.textContent = config[i];
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
for(var j = 0; j < rowData.length; j++) {
tableRow.insertCell().textContent = rowData[j]; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
// sample data
var tableConfig = ["Exception ID", "Type"];
var exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
var table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
var table = document.createElement("table");
var tHead = table.createTHead();
var headerRow = tHead.insertRow();
for(var i = 0; i < config.length; i++) {
var th = document.createElement("th");
th.textContent = config[i];
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (var i = 0; i < data.length; i++) {
var rowData = data[i];
var tableRow = table.insertRow();
for(var j = 0; j < rowData.length; j++) {
tableRow.insertCell().textContent = rowData[j]; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
// sample data
const tableConfig = ["Exception ID", "Type"];
const exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
const table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
const table = document.createElement("table");
const tHead = table.createTHead();
const headerRow = tHead.insertRow();
for(header of config) {
const th = document.createElement("th");
th.textContent = header;
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (rowData of data) {
const tableRow = table.insertRow();
for(cellData of rowData) {
tableRow.insertCell().textContent = cellData; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
// sample data
const tableConfig = ["Exception ID", "Type"];
const exceptionData = [
[1, "ERROR"],
[2, "WARNING"],
[3, "INFORMATION"],
[4, "ERROR"],
[5, "WARNING"],
[6, "INFORMATION"],
[7, "OTHER"],
[8, "OTHER"]
];
//how make the table and put the data in
const table = createTable(tableConfig);
fillTable(table, exceptionData);
document.getElementById("tableDiv").appendChild(table);
function createTable(config) {
const table = document.createElement("table");
const tHead = table.createTHead();
const headerRow = tHead.insertRow();
for(header of config) {
const th = document.createElement("th");
th.textContent = header;
headerRow.appendChild(th);
}
return table;
}
function fillTable(table, data) {
for (rowData of data) {
const tableRow = table.insertRow();
for(cellData of rowData) {
tableRow.insertCell().textContent = cellData; //create and set the content
}
}
}
table, th, td {
border: 1px black solid;
border-collapse: collapse;
}
<div id="tableDiv"></div>
answered Jan 4 at 21:12
VLAZVLAZ
4,64532235
4,64532235
add a comment |
add a comment |
Ok you have array of objects, you want to show data in table right. Then follow below code.
In JSP page write empty table with header.
<table id="tableID">
<thead>
<th>Header</th>
<thead>
<tbody>
</tbody>
</table>
In JS file write below
var text = ""
var i;
for (i = 0; i < array.length; i++) {
text += <tr><td>array[ i ]</td></tr>;
}
$('#tableID').find('tbody').html(text); // Jquery
Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.
– Ayush
Jan 3 at 7:30
Then use DataTable concept . It's give lot of futures also .
– user3678149
Jan 3 at 7:32
for that I have to create a table first.
– Ayush
Jan 3 at 7:38
the new edit seems to be optimized, let me try that, will update you soon.
– Ayush
Jan 3 at 7:50
@Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM
– VLAZ
Jan 3 at 7:56
|
show 1 more comment
Ok you have array of objects, you want to show data in table right. Then follow below code.
In JSP page write empty table with header.
<table id="tableID">
<thead>
<th>Header</th>
<thead>
<tbody>
</tbody>
</table>
In JS file write below
var text = ""
var i;
for (i = 0; i < array.length; i++) {
text += <tr><td>array[ i ]</td></tr>;
}
$('#tableID').find('tbody').html(text); // Jquery
Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.
– Ayush
Jan 3 at 7:30
Then use DataTable concept . It's give lot of futures also .
– user3678149
Jan 3 at 7:32
for that I have to create a table first.
– Ayush
Jan 3 at 7:38
the new edit seems to be optimized, let me try that, will update you soon.
– Ayush
Jan 3 at 7:50
@Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM
– VLAZ
Jan 3 at 7:56
|
show 1 more comment
Ok you have array of objects, you want to show data in table right. Then follow below code.
In JSP page write empty table with header.
<table id="tableID">
<thead>
<th>Header</th>
<thead>
<tbody>
</tbody>
</table>
In JS file write below
var text = ""
var i;
for (i = 0; i < array.length; i++) {
text += <tr><td>array[ i ]</td></tr>;
}
$('#tableID').find('tbody').html(text); // Jquery
Ok you have array of objects, you want to show data in table right. Then follow below code.
In JSP page write empty table with header.
<table id="tableID">
<thead>
<th>Header</th>
<thead>
<tbody>
</tbody>
</table>
In JS file write below
var text = ""
var i;
for (i = 0; i < array.length; i++) {
text += <tr><td>array[ i ]</td></tr>;
}
$('#tableID').find('tbody').html(text); // Jquery
edited Jan 3 at 7:46
answered Jan 3 at 7:17
user3678149user3678149
1777
1777
Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.
– Ayush
Jan 3 at 7:30
Then use DataTable concept . It's give lot of futures also .
– user3678149
Jan 3 at 7:32
for that I have to create a table first.
– Ayush
Jan 3 at 7:38
the new edit seems to be optimized, let me try that, will update you soon.
– Ayush
Jan 3 at 7:50
@Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM
– VLAZ
Jan 3 at 7:56
|
show 1 more comment
Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.
– Ayush
Jan 3 at 7:30
Then use DataTable concept . It's give lot of futures also .
– user3678149
Jan 3 at 7:32
for that I have to create a table first.
– Ayush
Jan 3 at 7:38
the new edit seems to be optimized, let me try that, will update you soon.
– Ayush
Jan 3 at 7:50
@Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM
– VLAZ
Jan 3 at 7:56
Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.
– Ayush
Jan 3 at 7:30
Basically, you and I are doing the same thing. you just took an extra variable and then added it by innerHTML. I wanted an alternative or a solution which might remove script code from my innerHTML string.
– Ayush
Jan 3 at 7:30
Then use DataTable concept . It's give lot of futures also .
– user3678149
Jan 3 at 7:32
Then use DataTable concept . It's give lot of futures also .
– user3678149
Jan 3 at 7:32
for that I have to create a table first.
– Ayush
Jan 3 at 7:38
for that I have to create a table first.
– Ayush
Jan 3 at 7:38
the new edit seems to be optimized, let me try that, will update you soon.
– Ayush
Jan 3 at 7:50
the new edit seems to be optimized, let me try that, will update you soon.
– Ayush
Jan 3 at 7:50
@Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM
– VLAZ
Jan 3 at 7:56
@Ayush it is not optimised. It's not syntactically correct for a start and even if it was, it does string concatenation which maybe shortens the amount of code you write but will likely perform poorly with large sets of data due to the overhead of creating lots of strings. Other than that, it will have the same profile as any other innerHTML solution as it still requires string parsing into DOM
– VLAZ
Jan 3 at 7:56
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017634%2fany-alternative-to-create-a-dynamic-table-using-javascript-innerhtml%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Yes, see HTMLTableElement.
– Teemu
Jan 3 at 6:59
@Teemu, Thanks. can you please refer me a code example to go through?
– Ayush
Jan 3 at 7:02
2
There are plenty of examples at MDN, when you're digging deep to the table elements creation.
– Teemu
Jan 3 at 7:04
it's very easy in jquery . First take one variable and append the html code . and assign that variable into css ID. if you want example then tell me I will send as answer
– user3678149
Jan 3 at 7:08
@user3678149, it will be great if you can help me with the example.
– Ayush
Jan 3 at 7:10