动态创建HTML报表数据的布局列

// 假设有一个包含数据的数组
var data = [
  { name: 'John', age: 25, city: 'New York' },
  { name: 'Jane', age: 30, city: 'London' },
  { name: 'Bob', age: 35, city: 'Paris' }
];

// 获取表格容器
var tableContainer = document.getElementById('table-container');

// 创建表格元素
var table = document.createElement('table');

// 创建表头
var thead = document.createElement('thead');
var headerRow = document.createElement('tr');
for (var key in data[0]) {
  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(item) {
  var row = document.createElement('tr');
  for (var key in item) {
    var td = document.createElement('td');
    td.textContent = item[key];
    row.appendChild(td);
  }
  tbody.appendChild(row);
});
table.appendChild(tbody);

// 将表格添加到容器中
tableContainer.appendChild(table);