art-template小demo

DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document title >
< script src= "./template-web.js" > < / script >

< script type= "text/tmpl" id= "tmpl" >
<% for(var i=0;i
<%= arr[i].id%>
<%= arr[i].name%>
<%= arr[i].age%>
<% } %>
script >
head >

< body >
< table >
< thead >
< tr >
< th >id th >
< th >name th >
< th >age th >
tr >
thead >
< tbody id= "tbody" > tbody >
table >
body >

< script >
// // 3.自定义的数组
var arr = [{
"id" : 1,
"name" : "小红",
"age" : 10
}, {
"id" : 2,
"name" : "小刚",
"age" : 11
}, ];
// // 4 传入数据之后模板会自动遍历
var
str = template( "tmpl", {
arr: arr
});
// "tmpl"是编译模板是对应的id;{arr:arr}放的是对象 // 5获取tbody这个元素,然后利用DOM中的innerHTML获取str变量里面的内容
document. getElementById( "tbody"). innerHTML = str;
// 3-5放在最后是因为如果放在之前的话tbody还没有加载,会出现报错;
// 如果不想放在table后面,还可以使用window.οnlοad=function(){3-5步骤放在里面}

//

你可能感兴趣的:(art-template小demo)