jQuery – 透過元素 template 製作模板
HTML5 有一個元素叫做 <template>，在使用 jQuery 取得內容並複製成為模板，除了使用 clone() 之外，記得搭配 outerHTML 使用。以下範例
詳細程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1>訂單</h1> <table class="orders" border="1"> </table> <template class="item"> <tr> <th class="id"></th> <td class="title"></td> </tr> </template> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// 取得模板，透過取得 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) }) |