我认为这段代码可以解决你的任务：

function load_table(status) {
  $("table#mytable thead tr").empty();
  let initTime = status == "D" ? -3 : 9;
  let startTime = 9;
  if (status == "D") {
    for (var i = 0; i < 13; i++) {
      $("table#mytable thead tr").append(`
        <th>${startTime} - ${startTime+1 <= 12 ? startTime+1 +"AM"  : initTime+12+"PM"} </th>
      `);
      startTime++, initTime++;
    }
  } else {
    for (var i = 0; i < 13; i++) {
      $("table#mytable thead tr").append(`
        <th>${startTime} - ${startTime+1 <= 12 ? startTime+1 +"PM"  : initTime+12+"AM"} </th>
      `);
      startTime++;
      initTime++;
      if (initTime == 12) initTime = -12;
    }
  }
}

我认为如果你把格式化移位的逻辑从构造HTML的代码中分离出来，这个问题会变得容易得多。这样做的一个好处是，它会使测试移位构造（最难的部分）变得更容易，因为它会返回一个我们可以在控制台中查看的数组。
为了简化AM/PM逻辑，我最初也会根据24小时制创建每个小时。只有在格式化它以进行演示时，我才会将小时转换为12小时制。我们可以将格式化逻辑放入自己的函数中。
代码变为：

const formatHour = hour => {
  const suffix = (hour % 24) >= 12 ? 'PM' : 'AM';
  const formattedHour = hour % 12 || 12;
  
  return `${formattedHour}${suffix}`;
}
 
const getHours = status => {
  const startHour = status === 'D' ? 9 : 21;

  return (new Array(12)).fill(0).map((_, i) => {
    const start = (startHour + i) % 24;
    const end = (start + 1);
      
    return `${formatHour(start)} - ${formatHour(end)}`;
  });
}

const mapHoursToHtml = hours => hours.map(hour => {
  return `<th>${hour}</th>`;
}).join('');

$("#mytableD thead tr").append(mapHoursToHtml(getHours('D')));
$("#mytableN thead tr").append(mapHoursToHtml(getHours('N')));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="mytableD">
  <thead>
    <tr></tr>
  </thead>
</table>

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