forEach

HTML

<!-- 表身：第4列開始 -->

  <h3>調代課明細</h3>

  <table>

    <thead>

      <tr>

        <th>原月日</th><th>原班級</th><th>原節次</th><th>原科目</th>

        <th>調代課</th><th>調代月日</th><th>調代班級</th><th>調代節次</th>

        <th>調代科目</th><th>調代教師</th>

      </tr>

    </thead>

    <tbody id="tbody"></tbody>

  </table>

JavaScript

// 組合表身資料(多筆)

const tbody = document.getElementById("tbody");

tbody.innerHTML = ""; // 清空 tbody，只做一次

//data.detail是二維陣列

data.detail.forEach(detailRow => {

  const row = document.createElement("tr");

  row.innerHTML = `

    <td><label>${detailRow[0] || ""}</label></td>

    <td><label>${detailRow[1] || ""}</label></td>

    <td><label style="text-align: center;">${detailRow[2] || ""}</label></td>

    <td><label>${detailRow[3] || ""}</label></td>

    <td><label>${detailRow[4] || "---"}</label></td>

    <td><label>${detailRow[5] || ""}</label></td>

    <td><label>${detailRow[6] || ""}</label></td>

    <td><label style="text-align: center;">${detailRow[7] || ""}</label></td>

    <td><label>${detailRow[8] || ""}</label></td>

    <td><label>${detailRow[9] || ""}</label></td>

  `;

  tbody.appendChild(row);

});