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
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
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
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
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
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>
京公网安备 11010802041100号