[Solved:] How can I build a table in a variable and then insert it into the DOM?

Question

I want to build a grid (say 10 x 10 as an example) and then insert it into a div using an element id. I will delete the table and add it back based on user input. What I want to do is have a variable where I build the table HTML and when complete insert the table into the DOM at the div with id grid. What is the best way to do this using only Javascript?

Answer 1

For your study:

Using @Gordon's suggested way with object method
https://code.sololearn.com/WiW7ML9D7T3w/?ref=app

Answer 2

find below the code snippet in which table contains headers and one record :

<div id="grid"></div>

<script>
var parent = document.getElementById("grid");

var table = document.createElement("table");

parent.appendChild(table);

var tr1 = document.createElement("tr");
table.appendChild(tr1);
var th1 = document.createElement("th");
th1.innerHTML="Name";
tr1.appendChild(th1);
var th2 = document.createElement("th");
th2.innerHTML="Age";
tr1.appendChild(th2);
var th3 = document.createElement("th");
th3.innerHTML="Sex";
tr1.appendChild(th3);

var tr2 = document.createElement("tr");
table.appendChild(tr2);
var td1 = document.createElement("td");
td1.innerHTML="Rishi";
tr2.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML=26;
tr2.appendChild(td2);
var td3 = document.createElement("td");
td3.innerHTML="Male";
tr2.appendChild(td3);

</script>

Answer 3

Paul K Sadler
As far as I know using JavaScript this is the only way to create table i.e. using document.createElement() and document.appendChild().

If you want variable to store value that "LOOKS LIKE" html code then in that case you have to use jquery

Answer 4

Paul K Sadler

Actually you can play with Rishi's way in code playground

https://code.sololearn.com/W2rvcNgFjYH9/?ref=app

As long as you createElement table first

You can do all the table appendChild before at last parent appendChild table

And yes if in each iteration you do heavy things, the original way is laggy and your way of whole thing pumping out at last is looking less lagging.

What's more? You can add a callback function and display loader while awaiting.

Answer 5

I have been clear on my opinion on downvotes on this platform, so I won't belabor it here. On this question I have four upvotes with one negated by those who downvote in the shadows rather than express via comment their opinion on my question 🤔 I welcome their feedback. Downvotes diminish the platform. If I could downvote your downvote, I would, but unlike you, I would tell you why.

Answer 6

Use an array of arrays
createElement()
appendChild()

You can have a try first

Answer 7

I had meant to get back to this question before today.

I asked the question after reading about repaint and reflow as it relates to the browser. I posted code I had used in a Pixel drawing page where I build the table in strings and then add it to the DOM, which is fast as far as execution goes. I wanted to see if I could do it another way after reading Gordon, Calviղ , ODLNT and Rishi Anand input and ideas.

Here is what I came up with using a DocumentFragment:

https://code.sololearn.com/W1yjBFuw3r6t

Answer 8

Rishi Anand could the table be built in the variable table and then lastly be added to the DOM at the parent selector. Rather than adding piece by piece? Would that be less overhead?

Answer 9

Paul K Sadler
Here is 10x10 grid in table form with separated grid text update using update method.

https://code.sololearn.com/W7VN08io7zWE/?ref=app

Answer 10

You'll need modularity for flexibility of matrix dimension m by n.

Store your data as, say for example, a 3by4 matrix
var data =[ [ "oneone", "one two", "onethree", "one four"], ["twoone"...], [...]]

Build the createElement/appendChild function which runs nested for loop, outer for loop ending condition data.length, inner for loop ending condition data[0].length

Answer 11

Okay cool😎 I have to replace the alternator in my truck, then I will play with this. Gordon Rishi Anand Calviղ thanks for the pointers. 🙂

Answer 12

Gordon , Rishi Anand and Calviղ I am going to work with this now. I built the table by building the HTML in a string variable and then adding it to the DOM, but I wanted to try to do it by building the elements in JS and then inserting into the DOM like you three have shown. The method I did is fast and interestingly Chrome, Edge and Firefox add the th elements, even though I did not.

let tableRows = '';
let r = 1;
while (r <= rows) {
tableRows += '<tr>';
for (let c=1; c <= columns; c++) {
tableRows += '<td></td>';
}
tableRows += '</tr>';
r += 1;
} // end while loop
grid.insertAdjacentHTML('afterbegin', tableRows); // add grid to DOM

I wanted to mark you all as the best answer. Thanks for all the good information. You guys rock!

[Edit] 06/17/2019 I added this code sample for building the table in a string.

https://code.sololearn.com/W7Y1Wyk2A4nT/?ref=app

Answer 13

Geovanny Martínez Forero any thoughts on this question would be appreciated.

Answer 14

Paul K Sadler Do you need other possible solution out of the ones already provided?! 🤔

Answer 15

Geovanny Martínez Forero Much like the question you posted on branching without conditionals, I am interested to see what various methods might be proposed. So if you have a thought on an approach that is different than what has been put forth by others that have answered here, I would like to see it.

Answer 16

Kosen_05 you might find this question and the answers informative.

Answer 17

Alternative Table Build using String Template

https://code.sololearn.com/WOWG56a8L54Q/#js

Answer 18

Cggjkikhgfddgktstjfejiu1aioifddhfijcfgjo