javascript - 如何在 JavaScript 中动态添加表格列？

Question

我有两个数组，需要将两个数组中的数据写入表的两列。此时，我只能从第一个数组正确写入数据，当我想添加第二个数组数据时，它会添加到行中。

orderGelen 和 userNameArr 是我的数组。在这里你可以看到我的代码:

for(let data of orderGelen){ 
   dataHtmlIds += `<tr><td>${data}</td>`;
}

for(let usr of userNameArr){ 
   dataHtmlUsr += `<td>${usr}</td></tr>`;

}

dataHtml = dataHtmlIds + dataHtmlUsr;
console.log(dataHtml);

在这里我将其写入表中:

function tableConfig() { 

    tableBody.innerHTML = dataHtml;
}

如何制作第二列userNameArr数据？

Answer 1

尝试将两个数组放入一个数组中，如下所示

        const all = orderGelen.map((item, index) => ({ id: item, username: userNameArr[index] }));
        let html = '<table>';
        for (let row of all) {
            html += `<tr><td>${row.id}</td><td>${row.username}</td></tr>`;
        }
        html+='</table>'

        console.log(html);