Javascript 是否可以遍历数组中的每个项并输出为HTML？

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

script.js

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

var myArray=[]；
对于（var i=0；i

在同一个文件中

我有我的表格的大纲，我试图从“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>";

var头=
"" +
"" +
"" +
“”+“我的表：”+
"" +
"";
变量行=
"" +
“”++“”+
"" 
返回“+标题+”+行+”+”；

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

这里有一种方法：

// 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>";

//使用您提供的相同头代码
var行=”；
forEach（函数（项、索引）{
行+=“”；
行+=“”+项+“”；
行+=“”；
});
返回“+标题+”+行+”+”；

这里有一种方法：

// 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>";

//使用您提供的相同头代码
var行=”；
forEach（函数（项、索引）{
行+=“”；
行+=“”+项+“”；
行+=“”；
});
返回“+标题+”+行+”+”；

您可以在myArray中循环创建每一行，并将它们连接成一个更大的字符串

var rows = "";
for (var r = 0; r < myArray.length; r++) {
    var row = "<tr>" + "<td class='key'><strong>" + myArray[r] + "</strong></td></tr>";
    rows = rows.concat(row);
}

var行=”；
for（var r=0；r“+myArray[r]+””；
行=行。concat（行）；
}

您可以在myArray中循环创建每一行，并将它们连接成一个更大的字符串

var rows = "";
for (var r = 0; r < myArray.length; r++) {
    var row = "<tr>" + "<td class='key'><strong>" + myArray[r] + "</strong></td></tr>";
    rows = rows.concat(row);
}

var行=”；
for（var r=0；r“+myArray[r]+””；
行=行。concat（行）；
}

与其构建文本字符串以稍后设置为HTML，我会选择使用更简洁的方法来处理以下内容：

<table>
  <thead>
    <tr><td>A header</td></tr>
  </thead>
  <tbody>
  </tbody>
</table>
<script type="text/javascript">
  var values = ['foo', 'bar', 'baz']; // Values to insert in table

  // Get a reference to the <tbody> element
  var tbody = document.querySelector('tbody');

  for (var i = 0; i < values.length; i++) {
    // This appends a new row to the <tbody> and returns a reference
    // to that element
    var row = tbody.insertRow();

    // Similarly to append a cell to the row
    var cell = row.insertCell();

    // Create a text node for the textual content and append it
    // to the cell
    var text = document.createTextNode(values[i]);
    cell.appendChild(text);
  }
</script>

标题
变量值=['foo'，'bar'，'baz']；//要在表中插入的值
//获取对元素的引用
var tbody=document.querySelector（'tbody'）；
对于（变量i=0；i

---

如。

中所示，我不会构建文本字符串以稍后设置为HTML，而是选择使用更干净的方法来处理以下内容：

<table>
  <thead>
    <tr><td>A header</td></tr>
  </thead>
  <tbody>
  </tbody>
</table>
<script type="text/javascript">
  var values = ['foo', 'bar', 'baz']; // Values to insert in table

  // Get a reference to the <tbody> element
  var tbody = document.querySelector('tbody');

  for (var i = 0; i < values.length; i++) {
    // This appends a new row to the <tbody> and returns a reference
    // to that element
    var row = tbody.insertRow();

    // Similarly to append a cell to the row
    var cell = row.insertCell();

    // Create a text node for the textual content and append it
    // to the cell
    var text = document.createTextNode(values[i]);
    cell.appendChild(text);
  }
</script>

标题
变量值=['foo'，'bar'，'baz']；//要在表中插入的值
//获取对元素的引用
var tbody=document.querySelector（'tbody'）；
对于（变量i=0；i

---

如中所示。

“是否可以迭代数组中的每个项并将其输出为HTML？”-当然可以。问题中的代码表明，您已经知道如何使用for循环迭代列表，并且已经知道如何使用字符串文本和变量构建HTML字符串。因此，将这两个概念结合起来……在数组中，您拥有哪种类型的数据？“是否可以迭代数组中的每个项并输出为HTML？”-当然可以。问题中的代码表明，您已经知道如何使用for循环迭代列表，并且已经知道如何使用字符串文本和变量构建HTML字符串。因此，将这两个概念结合起来……在数组中，您拥有哪种类型的数据？