Question

大家好我有一个对象数组，我想添加到我的表中，名称标题为profiled，看起来像片段

我正在理解如何将这些数据附加到表中，是否有人需要时间来解释我

    var data = [{
      id: 12,
      data: 70,
      mama: "sjk"
    }, {
      id: 12,
      data: "mou",
      mama: "sjk"
    }, {
      id: 12,
      data: "mou",
      mama: "sjk"
    }]

    for (var i = 0; i < data.length; i++) {
      var node = document.createElement("tr")
      var tb = document.createElement("td")
      var textnode = document.createTextNode(data[i].data);
      tb.appendChild(textnode);
      node.appendChild(tb)
      document.getElementById("myList1").appendChild(node);
    }

<table>
  <thead>
    <tr>
      <th data-field="id">Name</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>

  <tbody id="myList1">

  </tbody>
</table>

Answer 1

关键点是for循环创建HTML表格行元素中的代码并插入tbody。

  var node = document.createElement("tr") // <tr></tr>
  var tb = document.createElement("td") // <td></td>
  var textnode = document.createTextNode(data[i].data); 
  tb.appendChild(textnode); // insert data into td element <td>data[i].data</td>
  node.appendChild(tb) // insert td element into tr <tr><td>data[i].data</td></tr>
  document.getElementById("myList1").appendChild(node); // insert tr element into tbody, which is myList1

所以在第一个循环之后，myList1将是

<tbody id="myList1">
    <tr><td>70</td></tr>
</tbody>

在第二次循环后，myList1将是

<tbody id="myList1">
    <tr><td>70</td></tr>
    <tr><td>mou</td></tr>
</tbody>

等等

这是你应该做的事情

var data = [{
  id: 12,
  data: 70,
  mama: "sjk"
}, {
  id: 12,
  data: "mou",
  mama: "sjk"
}, {
  id: 12,
  data: "mou",
  mama: "sjk"
}]

for (var i = 0; i < data.length; i++) {
  var node = document.createElement("tr")
  for (var key of ['id', 'data', 'mama']) {
    var tb = document.createElement("td")
    tb.innerHTML = data[i][key]
    node.appendChild(tb)
  }
  document.getElementById("myList1").appendChild(node);
}

Answer 2

由于您将表格数据存储到对象数组中，因此可以先将属性名称存储到数组中。然后循环遍历数据，并在每一轮中，在嵌套循环中创建单元格及其内容。像这样：

{{1}}

Margaret Bloom

如何在表中追加一个对象数组

2 个答案: