对象数据数组渲染到表格

可以使用 JavaScript 中的 DOM 操作来将对象数组渲染到表格中。以下是一个简单的示例：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript 代码：

const data = [
  { name: "Alice", age: 25, city: "New York" },
  { name: "Bob", age: 30, city: "San Francisco" },
  { name: "Charlie", age: 35, city: "Los Angeles" },
];

const tableBody = document.querySelector("#myTable tbody");

data.forEach((item) => {
  const row = document.createElement("tr");
  row.innerHTML = `
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.city}</td>
  `;
  tableBody.appendChild(row);
});

在这个示例中，我们首先定义了一个包含对象数据的数组 `data`。然后，我们选择表格的 `tbody` 元素，并使用 `forEach()` 方法遍历数组中的每个对象。在循环中，我们创建一个新的表格行元素 `tr`，并将每个对象的属性值插入到新的单元格元素 `td` 中。最后，我们将新的行元素添加到表格的 `tbody` 元素中。

这样，我们就可以将对象数据数组渲染到表格中了。需要注意的是，这只是一个简单的示例，实际应用中可能需要对数据进行处理和格式化，以便更好地呈现在表格中。