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数据？

标签： javascripthtmlcss

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);