兼容ie8（很实用，复制过来，仅供技术参考，更详细内容请看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）

<!DOCTYPE html>

<html>

  <head>

    <META http-equiv=Content-Type content="text/html; charset=utf-8">

    <title>关于循环中索引的使用 - by 杨元</title>

  </head>

  <body>

    <h1>关于循环中索引的使</h1>

    <!--基础html框架-->

    <table>

      <thead>

        <tr>

          <th>序号</th>

          <th>姓名</th>

          <th>性别</th>

          <th>年龄</th>

        </tr>

      </thead>

      <tbody id="tableList">

      </tbody>

    </table>

    <!--插件引用-->

    <script type="text/javascript" src="script/jquery.js"></script>

    <!--注意！这个例子用的是新版本handlebars，旧版本不支持-->

    <script type="text/javascript" src="script/handlebars-v1.3.0.js"></script>

    <!--Handlebars.js模版-->

    <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->

    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->

    <script id="table-template" type="text/x-handlebars-template">

      {{#each student}}

      <tr>

        <td>{{addOne @index}}</td>

        <td>{{name}}</td>

        <td>{{sex}}</td>

        <td>{{age}}</td>

      </tr>

      {{/each}}

    </script>

    <!--进行数据处理、html构造-->

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

         var data = {

                      "student": [

                          {

                              "name": "张三",

                              "sex": "0",

                              "age": 18

                          },

                          {

                              "name": "李四",

                              "sex": "0",

                              "age": 22

                          },

                          {

                              "name": "妞妞",

                              "sex": "1",

                              "age": 19

                          }

                      ]

                  };

        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架

        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。

        var myTemplate = Handlebars.compile($("#table-template").html());

        //注册一个Handlebars Helper,用来将索引+1，因为默认是从0开始的

        Handlebars.registerHelper("addOne",function(index,options){

          return parseInt(index)+1;

        });

        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

        $('#tableList').html(myTemplate(data));

      });

    </script>

  </body>

</html>

使用jQuery+huandlebars循环遍历中使用索引的更多相关文章

  1. Java循环遍历中直接修改遍历对象

    Java 循环遍历中直接修改遍历对象如下,会报异常: for (ShopBaseInfo sp: sourceList) { if(sp.getId()==5){ sourceList.remove( ...

  2. jquery each循环遍历完再执行的方法

    jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器. var eachcount=0; <pre> $(".emptytip").eac ...

  3. 关于js中循环遍历中顺序执行ajax的问题（vue）

    js里的循环,每次都是自顾自的走,它不等ajax执行好走完到success代码,就继续循环下一条数据了,这样数据就全乱了. 后来,想到试试ajax里async这个属性,async默认是true,即为异 ...

  4. 使用jQuery+huandlebars循环中索引(@index)使用技巧(访问父级索引)

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  5. Python的list循环遍历中，删除数据的正确方法

    在遍历list,删除符合条件的数据时,总是报异常,代码如下: num_list = [1, 2, 3, 4, 5] print(num_list) for i in range(len(num_lis ...

  6. *使用while循环遍历数组创建索引和自增索引值

    package com.chongrui.test;/* *使用while循环遍历数组 *  *  * */public class test {    public static void main ...

  7. jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器.

    query each循环遍历完再执行的方法因为each是异步的 所以要加计数器.var eachcount=0;$(“.emptytip”).each(function(){ eachcount++c ...

  8. 关于js中循环遍历中顺序执行多个嵌套ajax的问题

    就是业务上需要完成一个功能,这个功能需要依次调用四个接口,后面接口的参数都依赖于前一个接口的返回值. 类似这样: var objArr = "从其他逻辑获得"; for(var n ...

  9. JQuery Each循环遍历每个元素

    输出每个 li 元素的文本: $("button").click(function(){ $("li").each(function(){ alert($(th ...

随机推荐

  1. Django App(五) load static files

    经过前面4篇的努力,已经基本完成了,polls站点的功能,但是所有界面都没有涉及样式,和JavaScript的导入.到目前为止了解到的Django是通过解析Url来完成对客户端的响应的,那么组成站点所 ...

  2. highcharts 获取不到隐藏容器大小

    1.固定图表大小 2.图表容器div的resize(绑定一个始终显示的,可以影响所有图表的) 影响容器大小改变的: 窗口大小改变 侧边栏切换 滚动条切换

  3. CF1109D Sasha and Interesting Fact from Graph Theory

    CF1109D Sasha and Interesting Fact from Graph Theory 这个 \(D\) 题比赛切掉的人基本上是 \(C\) 题的 \(5,6\) 倍...果然数学计 ...

  4. Ubuntu16.04安装yum的一种方式

    1. 首先检测是否安装 build-essential 包 sudo apt-get install build-essential 2.安装yum sudo apt-get install yum ...

  5. c# android 全局捕获未处理异常

    [Application] public class MyApp : Application { public MyApp(IntPtr javaReference, JniHandleOwnersh ...

  6. NIO、BIO、AIO区别

    一.同步阻塞I/O(BIO): 同步阻塞I/O,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线程开销,可以通过线程池机 ...

  7. 【rabbitmq】Centos7 下安装rabbitmq

    rabbitmq安装 rabbitmq的安装依赖erlang,首先应该先安装erlang,然后安装rabbitmq: Step1:安装erlang erlang-rpm安装教程 选择在Centos7 ...

  8. oracle数据库报错ora-01653表空间扩展失败解决方案

    1)ora-01653错误截图: 可以看到有两张表的insert受到了影响,都是在USERS表空间里.用以下SQL查看表空间使用情况: "表空间大小(M)",(a.bytes &q ...

  9. Redis为什么可以支持那么大的并发访问量？为什么redis没有单点并发瓶颈？

    一是redis使用内存 而是redis使用多路复用的IO模型: 现代的UNIX操作系统提供了select/poll/kqueue/epoll这样的系统调用,这些系统调用的功能是:你告知我一批套接字,当 ...

  10. 20145319 《网络渗透》MS08_067安全漏洞

    20145319 <网络渗透>MS08_067安全漏洞 一 实验内容 了解掌握metasploit平台的一些基本操作,能学会利用已知信息完成简单的渗透操作 了解漏洞MS08_067的相关知 ...