如何配置表格tbody以按数据库Period字段展示指定月份数据？

要实现将数据库中Period字段对应到表格月份列的效果，核心是先对原始数据做分组映射处理，再按固定月份列顺序渲染。以下是具体实现步骤：

1. 数据预处理（核心步骤） #

假设你的原始数据是从数据库查询得到的数组，结构类似：

// 示例原始数据：每条数据包含维度（如产品/部门）、Period（月份）、数值
const rawData = [
  { groupName: '产品A', Period: '1月', value: 120 },
  { groupName: '产品A', Period: '3月', value: 180 },
  { groupName: '产品B', Period: '1月', value: 90 },
  { groupName: '产品B', Period: '2月', value: 210 }
];

先把数据按维度（如groupName）分组，将每个月份的数值映射为对象属性：

const groupedData = {};
// 遍历原始数据，构建分组结构
rawData.forEach(item => {
  // 若当前维度未初始化，先创建基础结构
  if (!groupedData[item.groupName]) {
    groupedData[item.groupName] = { group: item.groupName };
  }
  // 将对应月份的数值存入属性
  groupedData[item.groupName][item.Period] = item.value;
});
// 转换为数组，方便后续渲染
const tableRows = Object.values(groupedData);

处理后的数据结构会变成：

[
  { group: '产品A', '1月': 120, '3月': 180 },
  { group: '产品B', '1月': 90, '2月': 210 }
]

2. 渲染表格tbody #

根据处理后的数据，按固定的月份列顺序渲染，缺失月份的数据可以补0或空值：

原生JavaScript渲染 #

<table>
  <thead>
    <tr>
      <th>维度</th>
      <th>1月</th>
      <th>2月</th>
      <th>3月</th>
      <!-- ...其他月份表头 -->
    </tr>
  </thead>
  <tbody id="dataBody"></tbody>
</table>

<script>
// 定义固定月份顺序，需和表头一致
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
const tbody = document.getElementById('dataBody');

tableRows.forEach(rowData => {
  const tr = document.createElement('tr');
  // 渲染维度列
  const groupTd = document.createElement('td');
  groupTd.textContent = rowData.group;
  tr.appendChild(groupTd);
  
  // 依次渲染每个月份的数值
  months.forEach(month => {
    const td = document.createElement('td');
    // 有数据则显示，无数据显示0（可改为''空值）
    td.textContent = rowData[month] || 0;
    tr.appendChild(td);
  });
  
  tbody.appendChild(tr);
});
</script>

模板引擎渲染（如EJS/Handlebars） #

如果用后端模板引擎，可在后端处理好tableRows后，直接在前端模板循环：

<tbody>
  <% tableRows.forEach(row => { %>
    <tr>
      <td><%= row.group %></td>
      <td><%= row['1月'] || 0 %></td>
      <td><%= row['2月'] || 0 %></td>
      <td><%= row['3月'] || 0 %></td>
      <!-- ...其他月份列 -->
    </tr>
  <% }) %>
</tbody>

注意事项 #

• 确保表头的月份顺序和渲染时遍历的months数组完全一致，避免错位
• 如果数据库中Period是数字格式（如1、2），只需调整months数组为['1','2',...'12']，对应匹配即可
• 缺失月份的数据可根据需求显示0、空字符串或-，调整rowData[month] || 0中的默认值即可

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