动态设置表格colspan及日期格式转换的前端实现求助

以下是针对需求的完整实现，包含HTML结构、CSS样式、jQuery逻辑和示例JSON数据：

1. 基础HTML结构 #

固定列（abc/def/ghi/region）合并两行表头，动态列分为Bottom/Top Performance两个大表头，预留动态colspan位置：

<table id="performanceTable">
  <thead>
    <tr>
      <th rowspan="2">abc</th>
      <th rowspan="2">def</th>
      <th rowspan="2">ghi</th>
      <th rowspan="2">region</th>
      <th colspan="" class="bottom-header">Bottom Performance</th>
      <th colspan="" class="top-header">Top Performance</th>
    </tr>
    <tr class="date-row">
      <!-- 动态生成日期子表头 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="fixed-col" data-key="abc"></td>
      <td class="fixed-col" data-key="def"></td>
      <td class="fixed-col" data-key="ghi"></td>
      <td class="fixed-col" data-key="region"></td>
      <!-- 动态生成Bottom/Top数据列 -->
    </tr>
  </tbody>
</table>

2. CSS样式 #

实现背景色需求，同时优化表格可读性：

/* 全局表格样式 */
#performanceTable {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

/* 固定列样式 */
.fixed-col {
  background-color: #f8f9fa;
  font-weight: 500;
}

/* Bottom Performance 红色背景 */
.bottom-header, .bottom-performance {
  background-color: #dc3545;
  color: #fff;
}

/* Top Performance 绿色背景 */
.top-header, .top-performance {
  background-color: #28a745;
  color: #fff;
}

3. jQuery逻辑与数据处理 #

完整实现动态colspan、日期格式转换、数据渲染：

// 示例JSON数据
const tableData = {
  "abc": "Sample A",
  "def": "Sample B",
  "ghi": "Sample C",
  "region": "EMEA",
  "01-2023": { "bottom": 45, "top": 92 },
  "02-20231": { "bottom": 58, "top": 87 },
  "03-2023": { "bottom": 66, "top": 94 },
  "04-20231": { "bottom": 72, "top": 89 }
};

// 日期处理工具函数：清理末尾1 + 转换为Jan-YYYY格式
function processDateKey(dateKey) {
  // 移除末尾的1（如果存在）
  const cleanedKey = dateKey.replace(/1$/, '');
  const [monthStr, year] = cleanedKey.split('-');
  const monthIndex = parseInt(monthStr) - 1;
  const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  return {
    formattedDate: `${monthNames[monthIndex]}-${year}`,
    cleanedKey: cleanedKey // 用于匹配原始数据
  };
}

// 提取动态日期键（排除固定列）
const fixedColumnKeys = ['abc', 'def', 'ghi', 'region'];
const rawDateKeys = Object.keys(tableData).filter(key => !fixedColumnKeys.includes(key));
const processedDates = rawDateKeys.map(key => processDateKey(key));
const monthCount = processedDates.length;

// 动态设置colspan
$('.bottom-header, .top-header').attr('colspan', monthCount);

// 渲染日期子表头（处理带1的日期键+格式转换）
const dateRow = $('.date-row');
// 给Bottom Performance添加日期列
processedDates.forEach(date => {
  dateRow.append(`<th>${date.formattedDate}</th>`);
});
// 给Top Performance添加日期列
processedDates.forEach(date => {
  dateRow.append(`<th>${date.formattedDate}</th>`);
});

// 渲染固定列数据
$('.fixed-col').each(function() {
  const key = $(this).data('key');
  $(this).text(tableData[key]);
});

// 渲染Bottom Performance数据列
const tbodyRow = $('tbody tr');
processedDates.forEach(date => {
  // 匹配原始数据中带1的键
  const matchingRawKey = rawDateKeys.find(k => k.replace(/1$/, '') === date.cleanedKey);
  tbodyRow.append(`<td class="bottom-performance">${tableData[matchingRawKey].bottom}</td>`);
});

// 渲染Top Performance数据列
processedDates.forEach(date => {
  const matchingRawKey = rawDateKeys.find(k => k.replace(/1$/, '') === date.cleanedKey);
  tbodyRow.append(`<td class="top-performance">${tableData[matchingRawKey].top}</td>`);
});

实现说明 #

1. 动态colspan：通过提取日期键的数量，给Bottom/Top的大表头设置colspan属性
2. 背景色设置：通过CSS类直接绑定到表头和数据列，实现红色/绿色背景
3. 日期格式转换：自定义processDateKey函数，先清理末尾的1，再将数字月份转换为英文缩写
4. 带1的日期键处理：使用正则表达式replace(/1$/, '')移除末尾的1，再匹配对应数据

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