如何使用 JavaScript 递归遍历嵌套表格并导出为标准 CSV 文件

本文介绍一种健壮的 javascript 方法，用于遍历含嵌套 `

在处理动态渲染的层级化表格（例如用户档案 + 关联子用户）时，常见陷阱是将包含嵌套表格的 <tr>（如 <td colspan="3"> 中的容器行）误判为数据行，导致 CSV 出现重复、错位或合并字段（如 "Tom Jack Sam Alex"）。根本原因在于：DOM 层级不等于数据层级——嵌套表格是独立的数据源，其 <tr> 应与顶层 <tr> 平权参与 CSV 行生成，而非被包裹在父行中。

正确的解决方案是统一采集所有“叶子级数据行”：即跳过任何含 colspan 的 <td> 所在的 <tr>，并递归提取所有 <tbody> 下的 <tr>，无论其位于主表还是嵌套表中。

以下是生产就绪的实现：

function exportTableToCsv() {
  const table = document.querySelector('table');
  const headers = Array.from(table.querySelectorAll('thead th'))
    .map(th => escapeCsvCell(th.textContent.trim()));

  const rows = [];

  // 递归收集所有有效数据行（排除含 colspan 的容器行）
  function collectDataRows(tbody) {
    tbody.querySelectorAll('tr').forEach(tr => {
      // 跳过包含 colspan 单元格的行（它们只是嵌套容器，非真实数据）
      if (tr.querySelector('td[colspan], th[colspan]')) return;

      const cells = Array.from(tr.querySelectorAll('td, th'))
        .map(cell => escapeCsvCell(cell.textContent.trim()));

      // 只保留列数匹配表头的行（防数据错位）
      if (cells.length === headers.length) {
        rows.push(cells);
      }
    });

    // 递归处理本 tbody 内嵌套的 table > tbody
    tbody.querySelectorAll('table tbody').forEach(nestedTbody => {
      collectDataRows(nestedTbody);
    });
  }

  // 从主表所有 tbody 开始收集
  table.querySelectorAll('tbody').forEach(tbody => {
    collectDataRows(tbody);
  });

  // 组装 CSV 字符串：首行为 header，后续为数据行
  const csvContent = [
    headers.join(','),
    ...rows.map(row => row.join(','))
  ].join('\n');

  downloadCsv(csvContent, 'export.csv');
}

// CSV 单元格转义：处理含逗号、换行、引号的值
function escapeCsvCell(value) {
  if (/[,\"\n\r]/.test(value)) {
    return `"${value.replace(/"/g, '""')}"`;
  }
  return value;
}

function downloadCsv(content, filename) {
  const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

✅ 关键设计说明：

ModelGate

一站式AI模型管理与调用工具

下载

立即学习“Java免费学习笔记（深入）”；

• 严格过滤容器行：通过 tr.querySelector('td[colspan], th[colspan]') 精准识别并跳过所有用于包裹嵌套表格的占位 <tr>，避免“Tom Jack Sam Alex”式错误合并；
• 跨层级统一采集：collectDataRows() 递归遍历任意深度的 <table><tbody><tr>，确保 Jack/Sam/Alex 与 Tom/Josh 处于同一 CSV 行级别；
• CSV 安全转义：escapeCsvCell() 自动为含逗号、双引号或换行符的单元格添加双引号，并对内部引号做 "" 转义，符合 RFC 4180 标准；
• 列数校验：if (cells.length === headers.length) 防止因 HTML 结构异常（如缺失单元格）导致 CSV 列偏移。

⚠️ 注意事项：

• 该方案假设所有数据行具有与表头一致的列数（<th> 数量）；若存在动态列宽（如部分行用 colspan 合并展示但实际无数据），需按业务逻辑预处理；
• 不依赖 innerText（可能受 CSS 隐藏影响），而使用 textContent 确保获取原始文本；
• 嵌套表格必须位于 <td colspan="N"> 内且自身结构完整（含 <tbody>），否则需调整选择器。

调用 exportTableToCsv() 即可一键导出结构清晰、无冗余、兼容 Excel 的 CSV 文件——真正实现“所见数据即所得”。