16 使用jquery-tmpl完成遍历

最新推荐文章于 2023-05-30 19:59:38 发布

张力的程序园

最新推荐文章于 2023-05-30 19:59:38 发布

阅读量525

点赞数

分类专栏： 999 技术随笔

本文链接：https://blog.csdn.net/langli204910/article/details/104894226

版权

999 技术随笔专栏收录该内容

21 篇文章 0 订阅

订阅专栏

jQuery-tmpl是一个简单的模板引擎,能够实现动态展示DOM数据。本节将提供一个极简单的jquery-tmpl的demo。

1、操作步骤

创建一个文件夹jquery-tmpl-demo
在jquery-tmpl-demo文件夹下导入jquery.tmpl.js、jquery-3.2.1.js
在jquery-tmpl-demo文件夹下创建index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="GBK">
        <script type="text/javascript" src="jquery-3.2.1.js"></script>
        <script type="text/javascript" src="jquery.tmpl.js"></script>
    </head>

    <body>

<div id="div_each"></div>
<script id="each" type="text/x-jquery-tmpl"> 
    <h3>users</h3>
    {{each(i,user) users}}
        <div>${i+1}:{{= user.name}}</div>
    {{/each}}
    <h4>group</h4>
    {{each(j,group) groups}}
        {{if j%2==0}}
        <div>${j}:${group.name}</div>
        {{/if}}
    {{/each}}
    <h3>depart</h3>
    {{each departs}}
        <div>{{= $value.name}}</div>
    {{/each}}
</script> 
<script type="text/javascript">
    var eachData = { users: [{ name: 'ali' }, { name: 'xiaoli'}], groups: [{ name: 'java' }, { name: 'python' }, { name: 'cpp'}], departs: [{ name: '开发'},{ name: '测试'}] };
    $("#each").tmpl(eachData).appendTo('#div_each');
</script>
</body>
</html>

测试
点击index.html，展示结果。

张力的程序园

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
16 使用jquery-tmpl完成遍历

jQuery-tmpl是一个简单的模板引擎,能够实现动态展示DOM数据。本节将提供一个极简单的jquery-tmpl的demo。1、操作步骤创建一个文件夹jquery-tmpl-demo在jquery-tmpl-demo文件夹下导入jquery.tmpl.js、jquery-3.2.1.js在jquery-tmpl-demo文件夹下创建index.html<!D...
复制链接

扫一扫