<h1>訂單</h1>
<table class="orders" border="1">
  
</table>

<template class="item">
  <tr>
    <th class="id"></th>
    <td class="title"></td>
  </tr>
</template>
// 取得模板,透過取得 HTML 以後複製一份
var getTemplate = function (){
  var html = $("template.item").html();
  return $(html).clone();
}

// 假設這是 AJAX 取得的資料
var ajaxData = function (){
  return [{
    id: 1,
    title: '蔬菜'
  }, {
    id: 2,
    title: '水果'
  }]
}

$(function (){
  // 開始
  var data = ajaxData()
  var temp = getTemplate()
  
  // 準備一個用來組合的 html 編碼的變數
  var mix = '';
  
  // 批次組合
  $.each(data, function (key, ele){
    temp.find(".id").text(ele.id)
    temp.find(".title").text(ele.title)
    
    // 必須要使用 outerHTML 才能取得根節點 <tr>
    mix += temp[0].outerHTML
  })
  
  // 迴圈結合後再一次寫入 html 可以減少效能負擔
  $("table.orders").html(mix)
    
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js