在网页上动态显示CSV文件作为HTML表格

// 读取CSV文件
function readCSV(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const content = event.target.result;
      const rows = content.split('\n');
      const data = rows.map((row) => row.split(','));
      resolve(data);
    };
    reader.onerror = (error) => {
      reject(error);
    };
    reader.readAsText(file);
  });
}

// 生成HTML表格
function generateTable(data) {
  const table = document.createElement('table');
  data.forEach((row) => {
    const tr = document.createElement('tr');
    row.forEach((cell) => {
      const td = document.createElement('td');
      td.textContent = cell;
      tr.appendChild(td);
    });
    table.appendChild(tr);
  });
  return table;
}

// 显示HTML表格
function displayTable(table) {
  const container = document.getElementById('table-container');
  container.innerHTML = '';
  container.appendChild(table);
}

// 处理CSV文件
function handleCSV(file) {
  readCSV(file).then((data) => {
    const table = generateTable(data);
    displayTable(table);
  }).catch((error) => {
    console.error(error);
  });
}

// 监听文件输入
const input = document.getElementById('csv-input');
input.addEventListener('change', (event) => {
  const file = event.target.files[0];
  handleCSV(file);
});