使用jQuery动态生成DataTable表头：班次AM/PM切换问题排查

原代码的问题在于用initTime这类变量手动处理AM/PM切换，逻辑混乱且容易出错，比如白班时12点后的转换逻辑错误，夜班时未正确处理跨天的时间转换。

下面是重构后的代码，用24小时制时间统一处理，再转换为12小时制格式，逻辑更清晰：

HTML代码 #

<table class="table" id="mytable">
  <thead>
    <tr></tr>
  </thead>
</table>

JavaScript代码 #

// 将24小时制时间转换为12小时制带AM/PM的字符串
function formatTime24to12(hour) {
  const period = hour >= 12 ? 'PM' : 'AM';
  // 转换为12小时制，0点转为12，13点转为1，以此类推
  const formattedHour = hour % 12 || 12;
  return `${formattedHour}${period}`;
}

function load_table(status) {
  const $theadTr = $("#mytable thead tr").empty();
  let startHour;
  const totalIntervals = 12; // 9AM到9PM/9PM到9AM共12个小时区间

  if (status === "D") {
    startHour = 9; // 白班起始9点（24小时制）
    for (let i = 0; i < totalIntervals; i++) {
      const currentHour = startHour + i;
      const nextHour = currentHour + 1;
      $theadTr.append(`<th>${formatTime24to12(currentHour)} - ${formatTime24to12(nextHour)}</th>`);
    }
  } else {
    startHour = 21; // 夜班起始21点（9PM，24小时制）
    for (let i = 0; i < totalIntervals; i++) {
      const currentHour = (startHour + i) % 24;
      const nextHour = (currentHour + 1) % 24;
      $theadTr.append(`<th>${formatTime24to12(currentHour)} - ${formatTime24to12(nextHour)}</th>`);
    }
  }
}

// 调用示例
load_table("D"); // 白班：9AM-10AM ... 8PM-9PM
// load_table("N"); // 夜班：9PM-10PM ... 8AM-9AM

代码说明 #

• formatTime24to12函数：统一处理24小时制到12小时制的转换，自动判断AM/PM，避免手动计算的错误。
• 白班逻辑：从9点（24小时制）开始，生成连续12个小时区间，直接转换为12小时制格式。
• 夜班逻辑：从21点（9PM）开始，用取模%24处理跨天的时间（比如23点之后是0点），完美覆盖9PM到次日9AM的所有区间。

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