以下是一种遍历对象数组并将其存储在表格中的解决方法的代码示例:
// 一个包含对象的数组
var data = [
{ name: 'John', age: 28, city: 'New York' },
{ name: 'Jane', age: 32, city: 'Los Angeles' },
{ name: 'Bob', age: 45, city: 'Chicago' }
];
// 创建表格元素
var table = document.createElement('table');
// 创建表头
var thead = document.createElement('thead');
var headerRow = document.createElement('tr');
Object.keys(data[0]).forEach(function(key) {
var th = document.createElement('th');
th.textContent = key;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
// 创建表格主体
var tbody = document.createElement('tbody');
data.forEach(function(obj) {
var row = document.createElement('tr');
Object.values(obj).forEach(function(value) {
var td = document.createElement('td');
td.textContent = value;
row.appendChild(td);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
// 将表格添加到页面中的某个元素
document.getElementById('myTableContainer').appendChild(table);
上述代码将对象数组data
遍历并将其存储在一个HTML表格中。它首先创建表格元素,然后创建表头和表格主体。在遍历对象数组时,它使用Object.keys()
和Object.values()
方法来获取对象的键和值,并将它们添加为表格的表头和数据行。
最后,它将表格添加到页面中的一个元素(在示例中,元素的id为myTableContainer
)。您可以根据自己的需求将其替换为实际的元素id。
上一篇:遍历对象数组并检查条件