使用jQuery+huandlebars循环遍历中使用索引
兼容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循环遍历中使用索引的更多相关文章
- Java循环遍历中直接修改遍历对象
Java 循环遍历中直接修改遍历对象如下,会报异常: for (ShopBaseInfo sp: sourceList) { if(sp.getId()==5){ sourceList.remove( ...
- jquery each循环遍历完再执行的方法
jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器. var eachcount=0; <pre> $(".emptytip").eac ...
- 关于js中循环遍历中顺序执行ajax的问题(vue)
js里的循环,每次都是自顾自的走,它不等ajax执行好走完到success代码,就继续循环下一条数据了,这样数据就全乱了. 后来,想到试试ajax里async这个属性,async默认是true,即为异 ...
- 使用jQuery+huandlebars循环中索引(@index)使用技巧(访问父级索引)
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- Python的list循环遍历中,删除数据的正确方法
在遍历list,删除符合条件的数据时,总是报异常,代码如下: num_list = [1, 2, 3, 4, 5] print(num_list) for i in range(len(num_lis ...
- *使用while循环遍历数组创建索引和自增索引值
package com.chongrui.test;/* *使用while循环遍历数组 * * * */public class test { public static void main ...
- jquery each循环遍历完再执行的方法 因为each是异步的 所以要加计数器.
query each循环遍历完再执行的方法因为each是异步的 所以要加计数器.var eachcount=0;$(“.emptytip”).each(function(){ eachcount++c ...
- 关于js中循环遍历中顺序执行多个嵌套ajax的问题
就是业务上需要完成一个功能,这个功能需要依次调用四个接口,后面接口的参数都依赖于前一个接口的返回值. 类似这样: var objArr = "从其他逻辑获得"; for(var n ...
- JQuery Each循环遍历每个元素
输出每个 li 元素的文本: $("button").click(function(){ $("li").each(function(){ alert($(th ...
随机推荐
- day 06 字符串和列表的方法
一.整形int 定义方式: age=18 #调用age=int(18)的方法,自动调用 n=int("123") #只能转换纯数字类型 二:浮点型float 定义方式 sal ...
- Error: No EPCS layout data - looking for section [EPCS-C84018]
/********************************************************************** * Error: No EPCS layout data ...
- AFN 二次封装
#import "YQDataManager.h" #import <YYModel/YYModel.h> #pragma mark - 数据model基类 @impl ...
- zabbix自动发现zabbix_agent后添加到所属组和链接到某些模块(九)
自动发现的两个操作:discovery(自动发现) and actions(发现后执行某个操作) 需求: 1:自动发现 Zabbix agent运行的主机 2:执行的动作 1)添加到所属组 ...
- RGB格式图像转化为HSV格式
注:在阴影检测算法中经常需要将RGB格式的图像转化为HSV格式,对于阴影区域而言,它的色度和饱和度相对于原图像而言变化不大,主要是亮度信息变化较大,,将RGB格式转化为HSV格式,就可以得到H.S.V ...
- debian删除i386的包
sudo apt-get remove --purge `dpkg --get-selections | grep i386 | awk '{print $1}'`; sudo dpkg --remo ...
- php中正则表达式详解
概述 正则表达式是一种描述字符串结果的语法规则,是一个特定的格式化模式,可以匹配.替换.截取匹配的字符串.常用的语言基本上都有正则表达式,如JavaScript.java等.其实,只有了解一种语言的正 ...
- CentOS7版本区别和下载
CentOS 7提供了三种ISO镜像文件的下载: DVD ISO 标准安装版,一般下载这个就可以了(推荐) Everything ISO 对完整版安装盘的软件进行补充,集成所有软件.(包含centos ...
- Django中media的配置
Django中media的配置 Django中media文件夹是我们文件(比如头像.文件.视频等)数据十分重要的存放处,这里以用户头像的上传以及media文件的访问为例为大家详细讲解下media的相关 ...
- Python【每日一问】05
问:请解释一下Python 中的 pass 语句.continue.break有什么作用?并辅以代码说明 答: 1.pass :pass是空语句,是为了保持程序结构的完整性.通常用于不知道接下来代码应 ...