从API响应中获取数据并显示在表格中

// 发起API请求
fetch('https://api.example.com/data')
  .then(response => response.json()) // 解析API响应为JSON格式
  .then(data => {
    // 创建表格
    const table = document.createElement('table');

    // 创建表头
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    const headers = ['ID', 'Name', 'Email']; // 假设API返回的数据有ID、Name和Email字段

    headers.forEach(headerText => {
      const header = document.createElement('th');
      header.textContent = headerText;
      headerRow.appendChild(header);
    });

    thead.appendChild(headerRow);
    table.appendChild(thead);

    // 填充表格数据
    const tbody = document.createElement('tbody');

    data.forEach(item => {
      const row = document.createElement('tr');

      Object.values(item).forEach(value => {
        const cell = document.createElement('td');
        cell.textContent = value;
        row.appendChild(cell);
      });

      tbody.appendChild(row);
    });

    table.appendChild(tbody);

    // 显示表格
    document.body.appendChild(table);
  })
  .catch(error => {
    console.error('Error:', error);
  });