html 批量从文件导入数据到指令的table表格中

可以使用 JavaScript 的 FileReader API 搭配 HTML 的表单和表格元素来实现。

以下是一个简单的示例：

HTML 代码：

<input type="file" id="file-input">
<table id="data-table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JavaScript 代码：

// 获取文件输入框和表格元素
const fileInput = document.getElementById('file-input');
const dataTable = document.getElementById('data-table');

// 监听文件输入框的 change 事件
fileInput.addEventListener('change', (event) => {
  // 获取选择的文件
  const file = event.target.files[0];
  // 创建 FileReader 实例
  const reader = new FileReader();
  // 监听 FileReader 的 load 事件，文件读取完毕后执行回调函数
  reader.addEventListener('load', (event) => {
    // 解析文件内容
    const data = event.target.result;
    const lines = data.split('\n'); // 假设每行数据用换行符分隔
    // 清空表格数据
    dataTable.querySelector('tbody').innerHTML = '';
    // 添加解析后的数据到表格中
    lines.forEach((line) => {
      const cells = line.split(','); // 假设每列数据用逗号分隔
      const row = document.createElement('tr');
      cells.forEach((cell) => {
        const td = document.createElement('td');
        td.textContent = cell.trim(); // 去除空白字符
        row.appendChild(td);
      });
      dataTable.querySelector('tbody').appendChild(row);
    });
  });
  // 读取文件内容
  reader.readAsText(file);
});

这段代码会监听文件输入框的 change 事件，当用户选择文件后，会读取文件内容并解析为行列数据，然后动态创建表格元素并添加到表格中。注意，这里只是一个简单的示例，实际场景中可能会有更复杂的数据格式和表格结构，需要根据实际情况进行调整。