1.0 js自定義模板 · php知識匯集

## js自定義模板 [TOC] * * * * * >[info] #### 1.知識要點 * jquery * 利用replace函數替換標簽 >[info] #### 2.核心代碼 ~~~ tpl.replace("{{name}}", n.name) ~~~ >[info] #### 3.效果圖 ![](https://box.kancloud.cn/2f59a7f3546835db409d4e541f9fb07b_653x170.png) >[info] #### 4.實例代碼 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義模塊</title> <style> body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;margin:0;padding:0;} .list{ border:solid 1px #ccc; margin:50px auto; width:500px; text-align: center; } li{ list-style-type: none; margin-bottom:5px; } li:first-child{ font-weight:bold; } .list li div{ display: inline-block; width:80px; } </style> </head> <body> <ul class="list"> <li> <div>姓名</div> <div>年齡</div> <div>性別</div> </li> </ul> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> var tpl = "<li><div>{{name}}</div><div>{{age}}</div><div>{{sex}}</div></li>"; var list = $(".list"); var data = { 1: {name: "王守仁", age: 58, sex: "男"}, 2: {name: "徐階", age: 81, sex: "男"}, 3: {name: "張居正", age: 58, sex: "男"}, 4: {name: "婁諒"} }; $.each(data, function (i, n) { list.append(tpl.replace("{{name}}", n.name).replace("{{age}}", n.age||"未知").replace("{{sex}}", n.sex||"未知")); }); </script> </body> </html> ~~~