基于可变JSON输出创建表格：动态展示分组Target统计结果

我来帮你搞定这个动态表格的问题！既然你已经搞定了Target的统计逻辑，那生成自适应的表格其实不难——之前用JSON.stringify和replace确实不太适合这种动态结构的场景，咱们换个更靠谱的方式：

核心思路 #

不管下次加载出现什么新的Target类型，只要你的统计结果是一个键为Target类型、值为对应次数的对象（比如{ "UserLogin":12, "DataFetch":8, "NewType":3 }），我们只需要遍历这个对象，动态生成表格的每一行即可，完全不用硬编码表头或固定行。

方案1：原生JS动态生成DOM（最可靠，易维护） #

假设你已经有了统计好的结果对象，比如：

// 示例统计数据，替换成你实际的统计结果即可
const targetStats = {
  "UserLogin": 12,
  "DataFetch": 8,
  "ErrorLog": 5,
  "NewUnknownType": 3 // 下次加载新增的类型也能自动适配
};

然后写一个生成表格的函数：

function buildTargetStatsTable(stats) {
  // 创建表格元素
  const table = document.createElement('table');
  table.style.borderCollapse = 'collapse'; // 用CSS美化，替代生硬的border属性

  // 生成表头
  const headerRow = document.createElement('tr');
  const typeHeader = document.createElement('th');
  typeHeader.textContent = 'Target类型';
  typeHeader.style = 'border:1px solid #ccc; padding:8px; text-align:left;';
  
  const countHeader = document.createElement('th');
  countHeader.textContent = '出现次数';
  countHeader.style = 'border:1px solid #ccc; padding:8px; text-align:left;';
  
  headerRow.appendChild(typeHeader);
  headerRow.appendChild(countHeader);
  table.appendChild(headerRow);

  // 遍历统计数据，生成每一行
  for (const [targetType, count] of Object.entries(stats)) {
    const row = document.createElement('tr');
    
    const typeCell = document.createElement('td');
    typeCell.textContent = targetType;
    typeCell.style = 'border:1px solid #ccc; padding:8px;';
    
    const countCell = document.createElement('td');
    countCell.textContent = count;
    countCell.style = 'border:1px solid #ccc; padding:8px;';
    
    row.appendChild(typeCell);
    row.appendChild(countCell);
    table.appendChild(row);
  }

  return table;
}

// 最后把表格添加到页面的某个容器里（比如id为stats-container的div）
const container = document.getElementById('stats-container');
container.appendChild(buildTargetStatsTable(targetStats));

方案2：模板字符串拼接HTML（代码更简洁） #

如果觉得DOM API写起来繁琐，也可以用模板字符串快速拼接HTML：

function buildTargetStatsTable(stats) {
  let tableHtml = `
    <table style="border-collapse: collapse;">
      <tr>
        <th style="border:1px solid #ccc; padding:8px; text-align:left;">Target类型</th>
        <th style="border:1px solid #ccc; padding:8px; text-align:left;">出现次数</th>
      </tr>
  `;

  // 遍历统计数据拼接行
  for (const [targetType, count] of Object.entries(stats)) {
    tableHtml += `
      <tr>
        <td style="border:1px solid #ccc; padding:8px;">${targetType}</td>
        <td style="border:1px solid #ccc; padding:8px;">${count}</td>
      </tr>
    `;
  }

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

// 插入到页面容器
document.getElementById('stats-container').innerHTML = buildTargetStatsTable(targetStats);

如果你用React/Vue等框架 #

以React为例，写法会更简洁，利用框架的列表渲染能力自动适配动态数据：

function TargetStatsTable({ stats }) {
  return (
    <table style={{ borderCollapse: 'collapse' }}>
      <thead>
        <tr>
          <th style={{ border: '1px solid #ccc', padding: '8px', textAlign: 'left' }}>Target类型</th>
          <th style={{ border: '1px solid #ccc', padding: '8px', textAlign: 'left' }}>出现次数</th>
        </tr>
      </thead>
      <tbody>
        {Object.entries(stats).map(([type, count]) => (
          <tr key={type}>
            <td style={{ border: '1px solid #ccc', padding: '8px' }}>{type}</td>
            <td style={{ border: '1px solid #ccc', padding: '8px' }}>{count}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// 使用组件：<TargetStatsTable stats={targetStats} />

这些方法的核心都是动态遍历统计结果对象，不管新增什么Target类型，表格都会自动生成对应的行，完美解决你遇到的类型不固定问题。

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