Javascript将3个文件中的HTML组合在一起创建表格

// 使用XMLHttpRequest对象异步加载HTML文件内容
var xhr = new XMLHttpRequest();
xhr.open('GET', 'file1.html', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var file1Content = xhr.responseText;
    // 在这里处理file1.html的内容
  }
};
xhr.send();

// 使用fetch API异步加载HTML文件内容
fetch('file2.html')
  .then(function(response) {
    if (response.ok) {
      return response.text();
    }
    throw new Error('Network response was not ok.');
  })
  .then(function(file2Content) {
    // 在这里处理file2.html的内容
  })
  .catch(function(error) {
    console.log('Error:', error);
  });

// 使用fetch API的async/await语法异步加载HTML文件内容
async function getFile3Content() {
  try {
    const response = await fetch('file3.html');
    if (response.ok) {
      const file3Content = await response.text();
      // 在这里处理file3.html的内容
    } else {
      throw new Error('Network response was not ok.');
    }
  } catch (error) {
    console.log('Error:', error);
  }
}
getFile3Content();

// 假设已经获取到了file1Content、file2Content和file3Content

// 创建一个新的HTML元素，例如<div>，用于容纳表格
var container = document.createElement('div');

// 将3个HTML文件的内容添加到容器中
container.innerHTML = file1Content + file2Content + file3Content;

// 在页面中插入容器
document.body.appendChild(container);

// 创建一个<table>元素
var table = document.createElement('table');

// 创建表头
var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th1 = document.createElement('th');
th1.textContent = '表头1';
var th2 = document.createElement('th');
th2.textContent = '表头2';
tr.appendChild(th1);
tr.appendChild(th2);
thead.appendChild(tr);
table.appendChild(thead);

// 创建表格内容
var tbody = document.createElement('tbody');
// 假设有一个包含数据的数组data
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement('tr');
  var td1 = document.createElement('td');
  td1.textContent = data[i].column1;
  var td2 = document.createElement('td');
  td2.textContent = data[i].column2;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
}
table.appendChild(tbody);

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