The purpose is to generate a table dynamically. I have seen that I can do it in several ways, but for its simplicity I wanted to simply generate a string (a list) of texts with all the HTML code that will generate the table.
The idea is the following:
document.getElementById('divTabla').innerHTML = "<table><tr><th>Partido</th><th>Resultado</th></tr></table>";
<div id="divTabla"></div>
I have also tried with double quotes, I don't know if it is important:
document.getElementById("divTabla").innerHTML = "<table><tr><th>Partido</th><th>Resultado</th></tr></table>";
<div id="divTabla"></div>
As I said, the code is more extensive, but I have tried to reduce it to the minimum expression, as in the example above and it still does not work.
You can do it in a very simple way, you just have to put a little logic and order to things:
First, if you want to put the information in a table , I recommend that you try to save js code, for example, putting the table directly in the HTML and also, that you always use the HTML structure that I used for this example as a base of the HTML files.
Second, I recommend (as a good practice and almost a law) that you attach the file
.js
to the end of the HTML file so that it does not generate any errors.The final code of the two files would be as follows:
Any questions, in the comments.
Solution you use
appendChild
First we create the array with each cell of the table. This array has other arrays inside it, one for each row:
In order to generate the table from the array, we use
map
,document.createElement
andappendChild
.We create the label
table
and add it to thediv
:table
:var tabla = document.createElement("table")
div
:document.getElementById("divTabla").appendChild(tabla)
Optionally we add a border to the table, in this case I will use the minimum border, which is 1:
The array
array_tabla
is traversed usingmap
:We create the rows and add them to the table:
var tr = document.createElement("tr")
tabla.appendChild(tr)
We loop through each row using
map
, each row is called ,x
and the cell's text is calledy
:We create a label
th
for the cell and add it to the rowtr
:var th = document.createElement("th")
.tr
:tr.appendChild(th)
.Finally we add the text
y
to the cellth
:th.innerHTML = y
Full code:
Alternative using innerHTML
We make a function that makes the label in plain text:
The parameters are ,
etiqueta
,atributos
andcentro
. We tried the following:The result is:
If instead, the
centro
is an array , each element of the array is joined . This time we'll test without attributes, so we passfalse
. The following is tested:The result will be:
To create the entire table we do this:
Let's see how the table is built, we start from the end and go to the beginning:
3.2 Generate the cells.
crear("th",false,y)
<th>Partido</th>
Y<th>Resultado</th>
<th>River - Boca</th>
Y<th>1 - 0</th>
3.1. Cells are merged:
<th>Partido</th><th>Resultado</th>
<th>River - Boca</th><th>1 - 0</th>
2.2. Each row is wrapped in
tr
, that is,crear("tr",false,
<tr><th>Partido</th><th>Resultado</th></tr>
<tr><th>River - Boca</th><th>1 - 0</th></tr>
2.1. Joining the rows:
<tr><th>Partido</th><th>Resultado</th></tr><tr><th>River - Boca</th><th>1 - 0</th></tr>
1.2. Wrapping in a
table
(the table with borders):crear("table","border=1",
<table border=1><tr><th>Partido</th><th>Resultado</th></tr><tr><th>River - Boca</th><th>1 - 0</th></tr></table>
1.1. Finally, it is assigned to the
div
:Full code using
innerHTML
:In full how are you modifying the DOM
Since scroll events can execute at a high rate, the event handler should not perform computationally expensive operations like DOM modifications.
This is also valid with the use of the For loop
https://developer.mozilla.org/es/docs/Web/API/Document/scroll_event