可以使用JavaScript的for循环来遍历对象数组,然后在HTML中构建一个表格,将每个对象的值插入到表格的单元格中。
以下是示例代码:
HTML部分:
Name | Age | City |
---|
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");
for (let i = 0; i < data.length; i++) { const row = document.createElement("tr"); const nameCell = document.createElement("td"); const ageCell = document.createElement("td"); const cityCell = document.createElement("td");
nameCell.textContent = data[i].name; ageCell.textContent = data[i].age; cityCell.textContent = data[i].city;
row.appendChild(nameCell); row.appendChild(ageCell); row.appendChild(cityCell);
tableBody.appendChild(row); }
这段代码将通过循环遍历数据数组并为每个数据对象创建一行。然后,将每个值从对象中提取出来,并将其插入到表格单元格中。最后,将行添加到表格主体中。
上一篇:遍历对象数组以渲染一个新的数组
下一篇:遍历对象数组中的每个元素