如何用JavaScript循环实现表格表头的多行多列嵌套结构？

问题说明 #

我需要通过JavaScript为表格的<th>设置值，原有代码可正常运行，但尝试为每个时间列下方添加包含<th>OK</th><th>NG</th><th>ST</th>的<tr>行时功能失效，期望实现两行表头结构：第一行展示时间，每个时间列对应下方三个状态列（OK/NG/ST）。

原有代码 #

JavaScript #

const anHour = 60*60*1000;
const getTimes = (start, end) => {
  const hours = [];
  for (let i = start, n = end.getTime(); i.getTime() <= n; i.setTime(i.getTime()+anHour)) hours.push(`${String(i.getHours()).padStart(2,"0")}:00`);
  return hours;
};

let startDate = new Date(2023, 0, 14, 8, 0, 0, 0);
console.log(startDate);

let endDate = new Date(2023, 0, 14, 20, 0, 0, 0);

var timeList = getTimes(startDate, endDate);

for(var i=0; i<timeList.length; i++) {
  var time = timeList[i];

  var element = `
    <th colspan="2">${time}</th>
  `;

  $(".wrapper .output-container table thead").append(element);
}

CSS #

.wrapper .output-container table {
    width: 100%;
}

.wrapper .output-container table th {
    padding: 10px;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="output-container">
    <table>
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>
</div>

问题原因 #

原有代码直接将<th>元素追加到<thead>下，不符合HTML表格的结构规范：<thead>的直接子元素必须是<tr>（表格行），不能是<th>。当尝试添加第二行<tr>时，浏览器的表格渲染逻辑会出现异常，导致功能失效。

解决方法 #

我们需要构建两个<tr>元素：一个用于存放时间表头（每个<th>的colspan设为3，对应下方3个状态列），另一个用于存放所有状态列（OK/NG/ST），然后将这两个<tr>追加到<thead>中。

修改后的代码 #

JavaScript

const anHour = 60*60*1000;
const getTimes = (start, end) => {
  const hours = [];
  for (let i = start, n = end.getTime(); i.getTime() <= n; i.setTime(i.getTime()+anHour)) {
    hours.push(`${String(i.getHours()).padStart(2,"0")}:00`);
  }
  return hours;
};

let startDate = new Date(2023, 0, 14, 8, 0, 0, 0);
let endDate = new Date(2023, 0, 14, 20, 0, 0, 0);
const timeList = getTimes(startDate, endDate);

// 构建时间表头行
let timeRow = '<tr>';
// 构建状态表头行
let statusRow = '<tr>';

timeList.forEach(time => {
  // 每个时间列跨3个状态列
  timeRow += `<th colspan="3">${time}</th>`;
  // 为每个时间添加对应的三个状态列
  statusRow += '<th>OK</th><th>NG</th><th>ST</th>';
});

timeRow += '</tr>';
statusRow += '</tr>';

// 将两行表头追加到thead中
$(".wrapper .output-container table thead").append(timeRow).append(statusRow);

CSS（可选优化）

.wrapper .output-container table {
    width: 100%;
}

.wrapper .output-container table th {
    padding: 10px;
    text-align: center; /* 让表头内容居中对齐，提升视觉效果 */
}

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="output-container">
    <table>
      <thead></thead>
      <tbody></tbody>
    </table>
  </div>
</div>

说明 #

• 严格遵循HTML表格结构规范，确保<thead>的子元素都是合法的<tr>，避免渲染异常
• 将时间列的colspan设为3，保证每个时间列与下方三个状态列准确对应，避免布局错位
• 使用forEach遍历时间列表，代码更简洁易读

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