请求实现：点击按钮根据用户选择读取指定CSV并生成HTML表格

我帮你完善了这个功能，下面是完整的实现代码，包含HTML结构和JavaScript逻辑，完全满足你“点击按钮才加载对应CSV并生成表格”的需求：

<!-- 下拉选择框：替换成你实际的CSV文件选项 -->
<select id="opt">
  <option value="">请选择CSV文件</option>
  <option value="data1.csv">销售数据.csv</option>
  <option value="data2.csv">用户列表.csv</option>
  <option value="data3.csv">库存记录.csv</option>
</select>

<!-- 触发按钮 -->
<button onclick="button_clicked()">加载CSV为表格</button>

<!-- 用于展示表格的容器 -->
<div id="table-container"></div>

<script>
function button_clicked() {
  var obj_opt = document.getElementById("opt");
  var csvFileName = obj_opt.value;

  // 先检查用户是否选中了文件
  if (csvFileName === "") {
    alert("请先选择一个CSV文件！");
    return;
  }

  // 获取表格容器，先清空之前的内容
  const tableContainer = document.getElementById("table-container");
  tableContainer.innerHTML = "";

  // 用Fetch API加载选中的CSV文件
  fetch(csvFileName)
    .then(response => {
      // 检查文件是否成功加载
      if (!response.ok) {
        throw new Error(`加载失败：${response.status} - ${response.statusText}`);
      }
      return response.text();
    })
    .then(csvText => {
      // 把CSV文本转换成HTML表格并插入到容器中
      const table = convertCsvToTable(csvText);
      tableContainer.appendChild(table);
    })
    .catch(error => {
      // 处理加载或解析错误
      alert(`出错了：${error.message}`);
      console.error("详细错误信息：", error);
    });
}

// 辅助函数：将CSV文本转为HTML表格
function convertCsvToTable(csvText) {
  // 按换行分割成行，过滤掉空行
  const rows = csvText.split("\n").filter(row => row.trim() !== "");
  const table = document.createElement("table");
  
  // 给表格加个边框，方便查看（可以根据需要调整样式）
  table.style.borderCollapse = "collapse";
  table.style.width = "100%";

  // 处理表头行
  const headerCells = rows[0].split(",");
  const thead = document.createElement("thead");
  const headerTr = document.createElement("tr");
  
  headerCells.forEach(cell => {
    const th = document.createElement("th");
    th.textContent = cell.trim();
    th.style.border = "1px solid #ddd";
    th.style.padding = "8px";
    th.style.backgroundColor = "#f2f2f2";
    headerTr.appendChild(th);
  });
  thead.appendChild(headerTr);
  table.appendChild(thead);

  // 处理表格内容行
  const tbody = document.createElement("tbody");
  for (let i = 1; i < rows.length; i++) {
    const rowCells = rows[i].split(",");
    const tr = document.createElement("tr");
    
    rowCells.forEach(cell => {
      const td = document.createElement("td");
      td.textContent = cell.trim();
      td.style.border = "1px solid #ddd";
      td.style.padding = "8px";
      tr.appendChild(td);
    });
    
    // 给奇数行加背景色，提升可读性
    if (i % 2 === 1) {
      tr.style.backgroundColor = "#f9f9f9";
    }
    
    tbody.appendChild(tr);
  }
  table.appendChild(tbody);

  return table;
}
</script>

关键功能说明： #

• 按需加载：只有点击按钮时才会根据选中的文件名加载CSV，完全替代了之前页面加载时自动读取硬编码文件的逻辑。
• 错误处理：包含了空选择提示、文件加载失败提示，方便用户排查问题。
• 表格样式优化：给表格加了边框、表头背景色、奇偶行区分，比默认表格更美观易读。
• 可扩展性：如果你的CSV包含带逗号的复杂字段（比如"Smith, John"），可以把convertCsvToTable函数里的简单分割逻辑换成成熟的CSV解析库（比如Papa Parse），处理更复杂的场景。

注意事项： #

• 确保CSV文件和HTML页面在同一目录（或正确配置文件路径），否则会出现加载失败的情况。
• 如果是本地开发，建议用本地服务器（比如VS Code的Live Server插件）运行HTML，避免直接打开文件时的跨域限制。

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