html 批量从文件导入数据到table

可以使用 JavaScript 中的 FileReader API 来读取文件，然后使用 DOM 操作来创建 table 并将数据导入到 table 中。

以下是一个示例代码：

HTML 代码：

<input type="file" id="fileInput">
<table id="dataTable"></table>

JavaScript 代码：

// 获取文件输入框和 table 元素
const fileInput = document.getElementById('fileInput');
const dataTable = document.getElementById('dataTable');

// 监听文件输入框的 change 事件
fileInput.addEventListener('change', function() {
  // 创建 FileReader 实例
  const reader = new FileReader();
  
  // 监听 FileReader 的 load 事件
  reader.addEventListener('load', function() {
    // 解析文件内容
    const data = reader.result.split('\n');
    // 创建表头
    const headerRow = document.createElement('tr');
    const headers = data[0].split(',');
    for (let i = 0; i < headers.length; i++) {
      const th = document.createElement('th');
      th.innerText = headers[i];
      headerRow.appendChild(th);
    }
    dataTable.appendChild(headerRow);
    // 创建数据行
    for (let i = 1; i < data.length; i++) {
      const values = data[i].split(',');
      const row = document.createElement('tr');
      for (let j = 0; j < values.length; j++) {
        const td = document.createElement('td');
        td.innerText = values[j];
        row.appendChild(td);
      }
      dataTable.appendChild(row);
    }
  });
  
  // 读取文件
  reader.readAsText(fileInput.files[0]);
});

上述代码假设文件内容为 CSV 格式，每行以逗号分隔。如果文件内容格式不同，需要根据实际情况修改代码。