jquery-jtemplates.js下载地址：https://gitee.com/nelsonlei/jquery-jtemplates.jsMoBanYingYong
?1 <!DOCTYPE html> ?2 <html> ?3 <head lang="en"> ?4 ??<meta charset="UTF-8"> ?5 ??<title></title> ?6 ??<script type="text/javascript" src="jquery.min.js"></script> ?7 ??<script type="text/javascript" src="jquery-jtemplates.js"></script> ?8 ??<style type="text/css"> ?9 ????.container { 10 ??????width: 1000px; 11 ??????height: 600px; 12 ??????margin: 0 auto; 13 ????} 14 ?15 ????.template { 16 ??????display: none; 17 ????} 18 ?19 ????table { 20 ??????background-color: #fff; 21 ????} 22 ?23 ????table tr th { 24 ??????padding: 8px; 25 ??????border-bottom: 1px solid #eee; 26 ????} 27 ?28 ????table tr td { 29 ??????padding: 10px; 30 ??????border-bottom: 1px solid #eee; 31 ????} 32 ??</style> 33 </head> 34 <body> 35 <div class="container"> 36 ?37 ??<!--内容展示区--> 38 ??<div id="result"></div> 39 ?40 ??<!--渲染处理区，textarea为必须元素，display：none--> 41 ??<textarea id="template" class="template"> 42 ??????<div>部门编号：{$T.list_id}</div> 43 ??????<div>部门负责人：{$T.name}</div> 44 ?????<div> 45 ???????<table> 46 ?????????<tr> 47 ???????????<th>编号</th> 48 ???????????<th>姓名</th> 49 ???????????<th>年龄</th> 50 ???????????<th>邮箱</th> 51 ???????????<th>性别</th> 52 ?????????</tr> 53 ?54 ?????????<!--渲染的关键句，类似于for循环--> 55 ?????????{#foreach $T.table as record} 56 ?????????<tr> 57 ???????????<td>{$T.record.id}</td> 58 ???????????<td>{$T.record.name}</td> 59 ???????????<td>{$T.record.age}</td> 60 ???????????<td>{$T.record.mail}</td> 61 ???????????<td>{$T.record.sex}</td> 62 ?????????</tr> 63 ?????????{#/for} 64 ?????????<!--渲染的关键句，类似于for循环--> 65 ???????</table> 66 ?????</div> 67 ??</textarea> 68 ?69 ?70 ??<div style="width: 100%;margin: 4rem 0;">------------上面是多维数组，下面是单维数组----------</div> 71 ?72 ?73 ??<div id="result1"></div> 74 ??<textarea id="template1" class="template"> 75 ?????<div> 76 ???????<table> 77 ?????????<tr> 78 ???????????<th class="Number">编号</th> 79 ???????????<th>姓名</th> 80 ???????????<th>年龄</th> 81 ???????????<th>邮箱</th> 82 ???????????<th>性别</th> 83 ?????????</tr> 84 ?85 ?????????<!--渲染的关键句，类似于for循环--> 86 ?????????{#foreach $T as record} 87 ?????????<tr> 88 ???????????<td>{$T.record.id}</td> 89 ???????????<td>{$T.record.name}</td> 90 ???????????<td>{$T.record.age}</td> 91 ???????????<td>{$T.record.mail}</td> 92 ???????????<td>{$T.record.sex}</td> 93 ?????????</tr> 94 ?????????{#/for} 95 ?????????<!--渲染的关键句，类似于for循环--> 96 ???????</table> 97 ?????</div> 98 ??</textarea> 99 100 101 102 </div>103 104 105 <script>106 ??var data = {107 ????"name": "网马伦",108 ????"list_id": 89757,109 ????"table": [110 ??????{"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com","sex":"man"},111 ??????{"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com","sex":"man"},112 ??????{"id": 13, "name": "卡卡", "age": 20, "mail": "112233@domain.com","sex":"man"}113 ????]114 ??};115 116 ??$("#result").setTemplateElement("template");117 118 ??$("#result").processTemplate(data);119 120 121 122 ??var table=[123 ????{"id": 13, "name": "卡卡", "age": 20, "mail": "112233@domain.com","sex":"man"},124 ????{"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com","sex":"man"},125 ????{"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com","sex":"man"}126 ??]127 ??$("#result1").setTemplateElement("template1");128 129 ??$("#result1").processTemplate(table);130 131 132 133 </script>134 </body>135 </html>效果如下：
jquery-jtemplates.js模板应用
原文地址：https://www.cnblogs.com/nelsonlei/p/8417651.html