Dynamically updating a table row in HTA (VBS)

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)