javascript - 是否可以迭代数组中的每个项目并输出为 HTML？

Question

我有一个 for 循环，如果目标属性通过某个条件，则将其推送到数组中。我想创建一个表，将每个项目输出到其自己的行中。对我自己来说，棘手的部分是理解如何动态地完成此操作。对数组中的每个项目进行硬编码并将其插入一行很容易。但这可以使用纯 JS 自动完成吗？

脚本.js

var myArray = [];
for (var i = 0; i < ccirdata.length; i++) {
    if (ccirdata[i].catType === 'I') {      
        myArray.push(ccirdata[i].catNum); 
    }
};

在同一个文件中，

我有表格的大纲，我试图在其中插入“myArray”中的迭代:

var header =
             "<thead>" +
             "<tr>" +
             "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
             "<td class='key'>" + " My Table:</td>" +
             "</tr>" +
             "</thead>";

var rows =
           "<tr>" +
           "<td class='key'><strong>" + <INSERT HERE> + "</strong></td>" +
            "</tr>" 

return "<table>" + header + "<tbody>" + rows +"</tbody>" + "</table>";

如何为 myArray 中的每个项目动态创建新行？

Answer 1

这是一种方法:

// using the same header code you provided

var rows = "";
myArray.forEach(function(item, index) {
    rows += "<tr>";
    rows += "<td class='key'><strong>" + item + "</strong></td>";
    rows += "</tr>";
});
return "<table>" + header + "<tbody>" + rows +"</tbody>" + "</table>";