如何用JavaScript读取文件并在HTML表格中展示费率数据？

需求说明 #

读取file.txt费率文件内容，解析后展示为包含「金额」「时长」两列的HTML表格，匹配示例展示效果。

现有代码问题 #

1. 缺少文件读取触发逻辑，TableCreate函数无执行入口
2. 循环内重复查询DOM元素，性能冗余
3. 循环步长逻辑模糊，易出错误
4. 未添加表头，不符合预期展示效果

完整解决方案 #

方案一：读取服务器部署的file.txt

适用于文件存放在网站服务器的场景：

HTML代码

<h2>费率方案</h2>
<button onclick="loadRateFile()">加载费率文件</button>
<table class="ratetable" id="myTable" cellpadding="2" cellspacing="2" border="1"></table>

JavaScript代码

// 读取服务器上的费率文件
function loadRateFile() {
  fetch('file.txt')
    .then(res => res.text())
    .then(text => TableCreate(text))
    .catch(err => console.error('文件读取失败:', err));
}

// 生成费率表格
function TableCreate(response) {
  const table = document.getElementById("myTable");
  // 清空表格原有内容
  table.innerHTML = '';

  // 添加表头
  const headerRow = table.insertRow();
  const headerCell1 = headerRow.insertCell(0);
  const headerCell2 = headerRow.insertCell(1);
  headerCell1.textContent = '金额';
  headerCell2.textContent = '时长';

  const dataArr = response.split(",");
  // 跳过开头空字符串，每两个元素为一组数据
  for (let i = 1; i < dataArr.length; i += 2) {
    // 过滤无效数据
    if (!dataArr[i] || !dataArr[i+1]) continue;
    
    const row = table.insertRow();
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);

    cell1.textContent = `${dataArr[i]} pesos`;
    cell2.textContent = dataArr[i+1];
  }
}

// 可选：页面加载完成自动读取文件
// window.onload = loadRateFile;

方案二：读取本地选择的file.txt

适用于让用户手动选择本地文件的场景：

HTML代码

<input type="file" id="fileInput" accept=".txt" />
<h2>费率方案</h2>
<table class="ratetable" id="myTable" cellpadding="2" cellspacing="2" border="1"></table>

JavaScript代码

// 监听文件选择事件
document.getElementById('fileInput').addEventListener('change', function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = function(event) {
    TableCreate(event.target.result);
  };
  reader.readAsText(selectedFile);
});

// 生成费率表格（与方案一逻辑一致）
function TableCreate(response) {
  const table = document.getElementById("myTable");
  table.innerHTML = '';

  const headerRow = table.insertRow();
  const headerCell1 = headerRow.insertCell(0);
  const headerCell2 = headerRow.insertCell(1);
  headerCell1.textContent = '金额';
  headerCell2.textContent = '时长';

  const dataArr = response.split(",");
  for (let i = 1; i < dataArr.length; i += 2) {
    if (!dataArr[i] || !dataArr[i+1]) continue;
    
    const row = table.insertRow();
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);

    cell1.textContent = `${dataArr[i]} pesos`;
    cell2.textContent = dataArr[i+1];
  }
}

关键优化点 #

• 新增文件读取逻辑：用fetch读取服务器文件，用FileReader读取本地文件
• 减少DOM查询次数：将表格元素获取操作移到循环外，提升性能
• 补充表头：匹配示例展示的结构要求
• 明确循环逻辑：用i += 2直接处理每组数据，避免逻辑混乱
• 过滤无效数据：防止空值生成错误表格行
• 替换innerHTML为textContent：避免潜在的XSS安全风险

内容的提问来源于stack exchange，提问作者John Wick