求助：基于TypeScript+HTML实现动态树形数据表格的rowspan问题

要解决树形结构数据在表格中动态管理rowspan的问题，核心是先统计每个父节点需要跨越的行数，再在渲染时仅为每组的第一个单元格设置rowspan属性。以下是针对你的需求实现的TypeScript+HTML代码：

1. HTML结构 #

<table id="treeTable" border="1">
  <thead>
    <tr>
      <th>D</th>
      <th>A</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

2. TypeScript实现 #

首先定义数据类型以保证类型安全：

// 定义树形数据的类型
interface CItem {
  c: number;
}

interface AItem {
  a: number;
  C: CItem[];
}

interface DItem {
  d: number;
  A: AItem[];
}

然后处理数据并渲染表格：

// 替换为你的测试数据（支持任意符合结构的树形数据）
const data: DItem[] = [
  { d: 1, A: [{ a: 11, C: [{ c: 111 }, { c: 112 }] }, { a: 12, C: [] }] },
  { d: 2, A: [{ a: 21, C: [{ c: 211 }] }] }
];

const tbody = document.querySelector('#treeTable tbody')!;

data.forEach(dItem => {
  // 计算当前D节点需要跨越的总行数：所有子A节点的行数之和
  const dRowspan = dItem.A.reduce((total, aItem) => total + Math.max(1, aItem.C.length), 0);
  let isFirstD = true;

  dItem.A.forEach(aItem => {
    // 计算当前A节点需要跨越的行数：C数组长度，为空则取1
    const aRowspan = Math.max(1, aItem.C.length);
    let isFirstA = true;

    // 处理C为空的情况：生成一个占位项确保至少渲染一行
    const renderItems = aItem.C.length > 0 ? aItem.C : [{} as CItem];
    
    renderItems.forEach(cItem => {
      const tr = document.createElement('tr');

      // 渲染D列：仅第一个单元格设置rowspan和内容
      const dTd = document.createElement('td');
      if (isFirstD) {
        dTd.setAttribute('rowspan', dRowspan.toString());
        dTd.textContent = dItem.d.toString();
        isFirstD = false;
      }
      tr.appendChild(dTd);

      // 渲染A列：仅第一个单元格设置rowspan和内容
      const aTd = document.createElement('td');
      if (isFirstA) {
        aTd.setAttribute('rowspan', aRowspan.toString());
        aTd.textContent = aItem.a.toString();
        isFirstA = false;
      }
      tr.appendChild(aTd);

      // 渲染C列：每个子项对应一行
      const cTd = document.createElement('td');
      cTd.textContent = cItem.c ? cItem.c.toString() : '-';
      tr.appendChild(cTd);

      tbody.appendChild(tr);
    });
  });
});

关键逻辑说明 #

• 行数计算：D的rowspan是其所有A子节点的行数之和，A的rowspan是其C子节点的数量（为空时默认1，避免无内容的情况）
• 单元格渲染控制：通过isFirstD和isFirstA标记组内第一个单元格，仅在此时设置rowspan并填充内容，后续同组单元格仅生成空的<td>，由rowspan属性自动覆盖
• 动态适配：代码支持任意符合结构的树形数据，替换data变量即可适配第二组测试数据

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