主攻帝国 全栈为辅

artTemplate之数组循环

声明循环变量var data={ artlist:[ {title:"新闻标题一"}, {title:"欢迎使用手机模板网"}, {title:"使用帝国cms建站"}, {title:"使用织梦C

声明循环变量

var data={
    artlist:[
        {title:"新闻标题一"},
        {title:"欢迎使用手机模板网"},
        {title:"使用帝国cms建站"},
        {title:"使用织梦Cms建站"}
    ]
};

模板代码

<script type="text/html" id="template">
    <%for(i in artlist){%>
    标题是: <%=artlist[i].title%><br/>
    <%}%>
</script>

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>artTemplate之hello world_手机模板网</title>
</head>
<body>
<div id="listbox"></div>
<script type="text/html" id="template">
    <%for(i in artlist){%>
    标题是: <%=artlist[i].title%><br/>
    <%}%>
</script>
</body>
</html>
<script src="static/js/template.js"></script>
<script>
    var data={
        artlist:[
            {title:"新闻标题一"},
            {title:"欢迎使用手机模板网"},
            {title:"使用帝国cms建站"},
            {title:"使用织梦Cms建站"}
        ]
    };
    var html=template("template",data);
    document.getElementById("listbox").innerHTML=html;
</script>

网页显示

\"blob.png\"/

本例地址:http://www.sjmoban.com/study/artTemplate/xh.html