JavaScript 动态表格生成

JavaScript 提供了强大的 DOM 操作能力，可以用于动态生成 HTML 表格。通过创建表格元素 (table, tr, th, td) 并设置其属性和内容，开发者可以根据需要构建灵活的数据展示界面。

以下是一个简单的示例，演示如何使用 JavaScript 创建一个包含数据的表格：

function createTable(data) {
  const table = document.createElement('table');
  const headerRow = document.createElement('tr');

  // 创建表头
  for (const key in data[0]) {
    const headerCell = document.createElement('th');
    headerCell.textContent = key;
    headerRow.appendChild(headerCell);
  }
  table.appendChild(headerRow);

  // 创建数据行
  data.forEach(item => {
    const row = document.createElement('tr');
    for (const key in item) {
      const cell = document.createElement('td');
      cell.textContent = item[key];
      row.appendChild(cell);
    }
    table.appendChild(row);
  });

  document.body.appendChild(table);
}

const sampleData = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 }
];

createTable(sampleData);

这段代码首先创建一个表格元素，然后遍历数据数组，为每个对象创建一行，并为每个属性创建一个单元格。最后将生成的表格添加到页面中。

通过修改数据结构和样式，开发者可以创建各种类型的表格，满足不同的数据展示需求。