如何将无固定表头的JSON转换为指定格式的HTML表格？

典型场景与问题说明 #

假设你的JSON数据源是分组结构（无固定表头，子项字段不固定），示例如下：

const data = [
  {
    "category": "电子产品",
    "items": [
      {"name": "手机", "price": "3999"},
      {"name": "平板", "price": "2999"}
    ]
  },
  {
    "category": "家用电器",
    "items": [
      {"name": "冰箱", "price": "4999"},
      {"name": "洗衣机", "price": "3499"},
      {"name": "空调", "price": "5999"}
    ]
  }
];

如果你的现有代码只是简单遍历生成行，没有动态计算colspan，就会出现分类单元格无法跨列合并的问题，比如这类无效代码：

function generateTable(data) {
  let html = '<table border="1">';
  data.forEach(item => {
    html += `<tr><td>${item.category}</td></tr>`;
    item.items.forEach(subItem => {
      html += `<tr><td>${subItem.name}</td><td>${subItem.price}</td></tr>`;
    });
  });
  html += '</table>';
  return html;
}

修正后的实现代码 #

核心思路是动态获取子项的列数，给需要合并的单元格设置对应的colspan属性：

function generateTableWithColspan(data) {
  if (!data.length || !data[0].items.length) return '<p>无数据</p>';
  
  // 从第一个子项提取字段名，确定列数（适配无固定表头）
  const subFieldNames = Object.keys(data[0].items[0]);
  const totalCols = subFieldNames.length;

  let html = '<table border="1" cellpadding="8" cellspacing="0">';

  // 生成表头（不需要表头可删除这段）
  html += '<tr style="background:#f0f0f0;">';
  subFieldNames.forEach(field => {
    html += `<th>${field}</th>`;
  });
  html += '</tr>';

  // 遍历分组生成表格内容
  data.forEach(group => {
    // 分类行：colspan等于子项的总列数
    html += `<tr><td colspan="${totalCols}" style="background:#e8e8e8;"><strong>${group.category}</strong></td></tr>`;
    
    // 生成子项数据行
    group.items.forEach(subItem => {
      html += '<tr>';
      subFieldNames.forEach(field => {
        html += `<td>${subItem[field] || '-'}</td>`;
      });
      html += '</tr>';
    });
  });

  html += '</table>';
  return html;
}

// 调用并插入页面
const resultHtml = generateTableWithColspan(data);
document.getElementById('table-container').innerHTML = resultHtml;

关键细节说明 #

• 动态适配列数：通过Object.keys(data[0].items[0])提取子项的字段，不管子项有多少个字段，都能自动计算需要合并的列数
• colspan赋值：给分类行的<td>设置colspan="${totalCols}"，确保单元格横向占满所有子项列
• 兼容性处理：添加了空数据判断、空值替换|| '-'，避免页面出错

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