目的是动态生成表。我已经看到我可以通过多种方式做到这一点,但为了简单起见,我想简单地生成一个文本字符串(一个列表),其中包含将生成表格的所有HTML代码。
思路如下:
document.getElementById('divTabla').innerHTML = "<table><tr><th>Partido</th><th>Resultado</th></tr></table>";
<div id="divTabla"></div>
我也试过用双引号,我不知道它是否重要:
document.getElementById("divTabla").innerHTML = "<table><tr><th>Partido</th><th>Resultado</th></tr></table>";
<div id="divTabla"></div>
正如我所说,代码更广泛,但我已尝试将其减少到最小表达式,如上面的示例所示,但它仍然无法正常工作。
你可以用一种非常简单的方式来做到这一点,你只需要把一些逻辑和秩序:
首先,如果要将信息放在表格中,我建议您尝试保存js代码,例如,将表格直接放在HTML中,并且您始终使用我在此示例中使用的HTML结构HTML 文件的基础。
其次,我建议(作为一种良好的做法,几乎是一条法律)将文件附加
.js
到 HTML 文件的末尾,这样它就不会产生任何错误。这两个文件的最终代码如下:
任何问题,在评论中。
您使用的解决方案
appendChild
首先,我们用表格的每个单元格创建数组。该数组内部还有其他数组,每行一个:
为了从数组中生成表,我们使用
map
,document.createElement
和appendChild
。我们创建标签
table
并将其添加到div
:table
:var tabla = document.createElement("table")
div
:document.getElementById("divTabla").appendChild(tabla)
我们可以选择为表格添加边框,在这种情况下,我将使用最小边框,即 1:
使用以下方法遍历数组 :
array_tabla
map
我们创建行并将它们添加到表中:
var tr = document.createElement("tr")
tabla.appendChild(tr)
我们使用 遍历每一行
map
,每一行被调用,x
单元格的文本被调用y
:我们为单元格创建一个标签
th
并将其添加到行中tr
:var th = document.createElement("th")
.tr
:tr.appendChild(th)
。最后我们将文本添加
y
到单元格中th
:th.innerHTML = y
完整代码:
使用 innerHTML 的替代方法
我们创建了一个以纯文本形式制作标签的函数:
参数是
etiqueta
、atributos
和centro
。我们尝试了以下方法:结果是:
相反,如果
centro
是一个数组,则数组的每个元素都会被连接。这次我们将在没有属性的情况下进行测试,所以我们通过false
. 测试如下:结果将是:
要创建整个表,我们这样做:
我们看看表是怎么建的,我们从头到尾:
3.2 生成细胞。
crear("th",false,y)
<th>Partido</th>
是<th>Resultado</th>
<th>River - Boca</th>
是<th>1 - 0</th>
3.1。单元格被合并:
<th>Partido</th><th>Resultado</th>
<th>River - Boca</th><th>1 - 0</th>
2.2. 每行都包裹在 中
tr
,即crear("tr",false,
<tr><th>Partido</th><th>Resultado</th></tr>
<tr><th>River - Boca</th><th>1 - 0</th></tr>
2.1。加入行:
<tr><th>Partido</th><th>Resultado</th></tr><tr><th>River - Boca</th><th>1 - 0</th></tr>
1.2. 包装在一个
table
(带边框的表格)中: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。最后,它被分配给
div
:完整代码使用
innerHTML
:完整的你如何修改 DOM
由于滚动事件可以高速执行,因此事件处理程序不应执行计算昂贵的操作,如 DOM 修改。
这对于使用 For 循环也是有效的
https://developer.mozilla.org/es/docs/Web/API/Document/scroll_event