Dynamically updating a table row in HTA (VBS) - html

Question

After researching I can see that to dynamically update a table within a HTA, I need to add the tbody element. I can also see that then I need to use the appendchild function to add the necessary data / rows to the table.
I've done this and am trying to loop through an array ArrLogs using the code below
Dim i
i = 1
Set table = document.getElementById("maintable")
Set tbody = document.createElement("tbody")
table.appendChild(tbody)
Set trow = document.createElement("tr")
Set tcol = document.createElement("td")
ArrLogs = ReadLogs(computerasset.value)
Do Until i = UBound(ArrLogs)
tcol.innerHTML = ArrLogs(i)
trow.appendChild(tcol)
tbody.appendChild(trow)
table.appendChild(tbody)
i = i+1
Loop
The problem I'm having is that I'm only seeing the last value of my array appended to the table, almost as if I'm missing a command to save the append and it's overwriting the row as it runs through?
I'm very concious that this isn't tidy, or the correct way to loop through an array (should use for i = 1 to UBound(ArrLogs) etc) - I was testing different ways of doing things in case I was making an obvious mistake.

Answer 1

trow.appendChild(tcol) does not copy tcol to the row; it inserts a reference to it, meaning that you only ever have one tcol that you constantly overwrite, E.g. the code below would show B not A
Set p = document.createElement("p")
p.innerHTML = "A"
document.body.appendChild(p)
p.innerHTML = "B"
To fix this create new elements inside your loop:
Dim i: i = 0
Set tbody = document.createElement("tbody")
ArrLogs = ReadLogs(computerasset.value)
for i = lbound(ArrLogs) to ubound(ArrLogs)
Set trow = document.createElement("tr")
Set tcol = document.createElement("td")
tcol.innerHTML = ArrLogs(i)
trow.appendChild(tcol)
tbody.appendChild(trow)
Next
document.getElementById("maintable").appendChild(tbody)