使用jQuery模板来展现json数据的代码

完整代码：

$.fn.parseTemplate = function(data) 
{ 
var str = (this).html(); 
var _tmplCache = {} 
var err = ""; 
try 
{ 
var func = _tmplCache[str]; 
if (!func) 
{ 
var strFunc = 
"var p=[],print=function(){p.push.apply(p,arguments);};" + 
"with(obj){p.push('" + 
str.replace(/[\r\t\n]/g, " ") 
.replace(/'(?=[^#]*#>)/g, "\t") 
.split("'").join("\\'") 
.split("\t").join("'") 
.replace(/<#=(.+?)#>/g, "',$1,'") 
.split("<#").join("');") 
.split("#>").join("p.push('") 
+ "');}return p.join('');"; //alert(strFunc); 
func = new Function("obj", strFunc); 
_tmplCache[str] = func; 
} 
return func(data); 
} catch (e) { err = e.message; } 
return "< # ERROR: " + err.toString() + " # >"; 
}

使用方法：

首先声明这个模板

<script id="template" type="text/html"> 
<table style="width:400px;"> 
<thead> 
<tr> 
<th>name</th> 
<th>age</th> 
<th>date</th> 
<th>type</th> 
</tr> 
</thead> 
<tbody> 
<# var xing = items.pm; 
#> 
<tr> 
<td> 
<#= xing.key #> 
</td> 
<td> 
<#= xing.key1 #> 
</td> 
<td> 
<#= xing.key #> 
</td> 
<td> 
<#= items.pm1 #> 
</td> 
</tr> 
<# 
#> 
</tbody> 
</table> 
<br /> 
<#= items.pm.length #> 记录 
</script>

然后使用

$(function(){ 
var json={"items":{"pm":{"key":"value","key1":"value1"},"pm1":"pmvalue"}}; 
var output=$('#template').parseTemplate(json); 
$('#cc').html(output); 
})

就是这么简单！