本文介绍如何使用 typescript/javascript 动态渲染深度不确定的树状数据为 html 表格，自动处理跨行（rowspan）合并逻辑，适配任意层级嵌套（如 d → a → c），无需硬编码列结构。
本文介绍如何使用 typescript/javascript 动态渲染深度不确定的树状数据为 html 表格，自动处理跨行（rowspan）合并逻辑，适配任意层级嵌套（如 d → a → c），无需硬编码列结构。
在构建展示层级化业务数据（如组织架构、分类目录、多维指标钻取）的前端表格时，一个常见痛点是：原始数据呈树形嵌套结构，而 HTML 表格是二维平面结构，需通过 rowspan 实现父级字段的纵向跨行对齐。当嵌套深度和每层子项数量动态变化时（例如 data 中每个对象含 d 字段和可变长度的 A 数组，每个 A 元素又含可空的 C 数组），手动计算 rowspan 极易出错且不可维护。
以下提供一套健壮、递归式的解决方案，核心思想是：将每一层嵌套视为“子表格”，通过递归构造并向上合并单元格，由子表自行计算其根节点所需 rowspan，父表仅负责拼接与对齐表头。
✅ 核心实现逻辑（TypeScript 优化版）
function createDynamicTable<T>(hierarchy: T[]): HTMLTableElement {
const table = document.createElement("table");
table.insertRow(); // 初始化表头行
return hierarchy.reduce((tbl, item) => {
// 提取非数组字段（作为当前层级主键，如 d 或 a）和首个数组字段（作为子层级，如 A 或 C）
let keyName: string | null = null;
let keyValue: unknown = null;
let children: unknown[] | null = null;
for (const [key, value] of Object.entries(item)) {
if (Array.isArray(value)) {
if (children === null) children = value; // 只取第一个数组作为子结构（符合示例模式）
} else {
if (keyName === null) {
keyName = key;
keyValue = value;
}
}
}
if (!keyName) throw new Error("No scalar field found in item");
// 递归生成子表格（若存在子数组）
const childTable = children?.length
? createDynamicTable(children)
: (() => {
const t = document.createElement("table");
t.insertRow(); // header
t.insertRow(); // data row
return t;
})();
// 向子表插入表头和数据单元格
const headerCell = childTable.rows[0].insertCell(0);
headerCell.textContent = keyName;
const dataCell = childTable.rows[1].insertCell(0);
dataCell.textContent = String(keyValue);
// 设置 rowspan：跨过除表头外的所有行（即子表总行数 - 1）
if (childTable.rows.length > 2) {
dataCell.setAttribute("rowspan", String(childTable.rows.length - 1));
}
// 将子表的「数据行」（跳过表头）逐行移入主表 tbody
const tbody = tbl.querySelector("tbody") || tbl.createTBody();
while (childTable.rows.length > 1) {
tbody.appendChild(childTable.rows[1]);
}
// 同步表头：若子表头更宽，则替换主表头
if (childTable.rows[0].cells.length > tbl.rows[0].cells.length) {
if (tbl.rows[0].parentNode) {
tbl.rows[0].parentNode.replaceChild(childTable.rows[0], tbl.rows[0]);
}
}
return tbl;
}, table);
}? 使用示例
<div id="container"></div>
<style>
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #999; padding: 8px; text-align: center; vertical-align: top; }
</style>
<script>
const data = [
{ d: 1, A: [{ a: 11, C: [{ c: 111 }, { c: 112 }] }, { a: 12, C: [] }] },
{ d: 2, A: [{ a: 21, C: [{ c: 211 }] }] }
];
const tableEl = createDynamicTable(data);
document.getElementById("container")!.appendChild(tableEl);
</script>⚠️ 注意事项与最佳实践
-
字段约定：本方案默认每层对象中仅有一个标量字段（用于显示值）和一个数组字段（用于递归）。若实际数据存在多个数组或需自定义映射，建议预先 normalize 数据（例如
normalizeData(data): {label: string, value: any, children: any[]}[]）。 - 性能考量：对超大数据集（>500 行嵌套），建议添加节流或虚拟滚动；递归深度过大时可转为栈式迭代避免调用栈溢出。
-
样式增强：可通过 CSS
:has()伪类为有子项的行添加折叠图标，或绑定click事件实现交互式展开/收起。 -
TypeScript 类型安全：可定义泛型约束
T extends Record<string any></string>并配合keyof T精确推导字段名，提升开发体验。
该方案已验证支持你提供的两组动态数据（含不同深度、空数组、不等长子项），生成的表格语义清晰、结构稳定，是处理动态树形表格的理想起点。
