如何基于数组长度为JavaScript动态表格设置Row Span

核心思路 #

要给重复行添加行合并（Row Span），关键是先按重复内容分组，确定每组的行数（即rowspan的值），然后只在每组的第一行渲染带rowspan的单元格，后续行跳过该单元格，保证表格结构正确的同时实现合并效果。

具体实现步骤 #

1. 数据分组
   先把原始数组按需要合并的字段（这里是comments）分组，用reduce方法快速实现：

   // 按comments字段分组，得到每个评论对应的行数据集合
   const groupedData = sequenceVariantDetails.reduce((result, item) => {
     const commentKey = item.comments || 'empty-comment'; // 处理空评论的情况，避免分组混乱
     if (!result[commentKey]) {
       result[commentKey] = [];
     }
     result[commentKey].push(item);
     return result;
   }, {});
   

2. 生成带Row Span的表格行
   遍历分组后的数据，只为每组的第一行添加rowspan属性，后续行只渲染其他列：

   let tableHtml = '<table>'; // 初始化表格标签
   // 遍历每个分组
   Object.values(groupedData).forEach(group => {
     const mergeCount = group.length; // 合并的行数
     // 第一行：渲染带rowspan的comments单元格+其他列
     tableHtml += `<tr>
       <td rowspan="${mergeCount}">${group[0].comments}</td>
       <td>${group[0].otherField1}</td> <!-- 替换成你的其他列字段 -->
       <td>${group[0].otherField2}</td>
     </tr>`;
     // 后续行：只渲染其他列，跳过comments单元格
     for (let i = 1; i < mergeCount; i++) {
       tableHtml += `<tr>
         <td>${group[i].otherField1}</td>
         <td>${group[i].otherField2}</td>
       </tr>`;
     }
   });
   tableHtml += '</table>';
   

3. 导出Excel的兼容性注意
   大多数Excel导出工具（如基于Blob的原生导出、table2excel插件）都能识别HTML的rowspan属性，但要注意：

   • 确保所有行的列数逻辑一致：合并列的后续行必须少一个单元格，否则表格结构错乱会导致导出失败
   • 如果需要合并多个列，要分别对每个列做分组处理，避免合并冲突

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