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

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

在处理动态渲染的层级化表格（例如用户档案 + 关联子用户）时，常见陷阱是将包含嵌套表格的

正确的解决方案是统一采集所有“叶子级数据行”：即跳过任何含 colspan 的

以下是生产就绪的实现：

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);
}

✅ 关键设计说明：

VIVA

一个免费的AI创意视觉设计平台

下载

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

• 严格过滤容器行：通过 tr.querySelector('td[colspan], th[colspan]') 精准识别并跳过所有用于包裹嵌套表格的占位

⚠️ 注意事项：

• 该方案假设所有数据行具有与表头一致的列数（

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