Question

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

的script.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>";

Answer 2

您可以遍历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);
}

Answer 3

我会选择使用insertRow这样的更干净的方法，而不是构建一个文本字符串以便以后设置为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>

如this JSFiddle中所示。

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

3 个答案: