<!DOCTYPE html>
<html lang="en-US">
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../javascript/jquery.js"></script>
<script type="text/javascript" src="../../javascript/juicer-min.js"></script>
<script type="text/javascript" src="../../javascript/jquery.json-2.3.js"></script>
<style type="text/css">
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-spacing: 0;
}
tr td {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
padding: 10px 30px;
}
</style>
<script type="text/javascript">
function renderToHtml(data){
var tpl = document.getElementById('tp1').innerHTML;
var html = juicer(tpl, data);
//alert(html);
jQuery("#content").html(html);
}
window.οnlοad=function(){
var indexOf = function getValueByIndex(arr,index){
if(arr.length<parseInt(index)+1){
return "null";
}else{
return arr[index];
}
}
juicer.register('indexOf', indexOf);
write();
}
function read(){
var sj=localStorage.getItem("data");
//alert(data);
var data = $.parseJSON(sj);
renderToHtml(data);
}
function write(){
localStorage.clear();
var xslb=new Array();
var xs1=new Object();
xs1.no=1;
xs1.name="高富帅";
xs1.age=19;
xslb.push(xs1)
var cj=new Array();
var yw=new Object();
yw.no=1;
yw.name="语文";
yw.score=88;
cj.push(yw);
var sx=new Object();
sx.no=3;
sx.name="数学";
sx.score=99;
cj.push(sx);
var xs2=new Object();
xs2.no=2;
xs2.name="白富美";
xs2.age=16;
xs2.cj=cj;
xslb.push(xs2)
var xx=new Object();
xx.name="北京大学";
xx.address="北京市朝阳区";
var data=new Object();
var cs=new Array();
cs.push("1");
cs.push("2");
cs.push("3");
data.xslb=xslb;
data.xx=xx;
data.cs=cs;
data.total=20;
var sj = $.toJSON(data);
//alert(sj);
localStorage.setItem("data",sj);
renderToHtml(data);
}
</script>
<script id="tp1" type="text/template">
<table>
<tr><td colspan=2>学校人数:${total} 学校名称: ${xx.name}</td></tr>
{@each cs as it,index}
<tr><td>-----------------------------</td><td>${cs, index | indexOf}</td></tr>
{@/each}
{@each xslb as it,index}
<tr > <td>学号</td><td> ${it.no}</td></tr>
<tr > <td>姓名</td><td>${it.name}</td></tr>
<tr > <td>年龄</td><td> ${it.age}</td></tr>
<tr > <td>成绩</td><td>
{@each it.cj as it2,index}
行号:${index}<br><hr>
名次:${it2.no}<br><hr>
姓名:${it2.name}<br><hr>
成绩:${it2.score}<br>
算术运算:${+it2.score/100}<br>
索引为字符串:${index+1}<br>
索引为数字:${+index+1}<br>
{@/each}
</td>
</div>
{@/each}
<table>
</script>
</head>
<body>
<div id="content"></div>
<input type="button" οnclick="read();" value="读取"></input>
</div>
</body>
</html>
<html lang="en-US">
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../javascript/jquery.js"></script>
<script type="text/javascript" src="../../javascript/juicer-min.js"></script>
<script type="text/javascript" src="../../javascript/jquery.json-2.3.js"></script>
<style type="text/css">
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-spacing: 0;
}
tr td {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
padding: 10px 30px;
}
</style>
<script type="text/javascript">
function renderToHtml(data){
var tpl = document.getElementById('tp1').innerHTML;
var html = juicer(tpl, data);
//alert(html);
jQuery("#content").html(html);
}
window.οnlοad=function(){
var indexOf = function getValueByIndex(arr,index){
if(arr.length<parseInt(index)+1){
return "null";
}else{
return arr[index];
}
}
juicer.register('indexOf', indexOf);
write();
}
function read(){
var sj=localStorage.getItem("data");
//alert(data);
var data = $.parseJSON(sj);
renderToHtml(data);
}
function write(){
localStorage.clear();
var xslb=new Array();
var xs1=new Object();
xs1.no=1;
xs1.name="高富帅";
xs1.age=19;
xslb.push(xs1)
var cj=new Array();
var yw=new Object();
yw.no=1;
yw.name="语文";
yw.score=88;
cj.push(yw);
var sx=new Object();
sx.no=3;
sx.name="数学";
sx.score=99;
cj.push(sx);
var xs2=new Object();
xs2.no=2;
xs2.name="白富美";
xs2.age=16;
xs2.cj=cj;
xslb.push(xs2)
var xx=new Object();
xx.name="北京大学";
xx.address="北京市朝阳区";
var data=new Object();
var cs=new Array();
cs.push("1");
cs.push("2");
cs.push("3");
data.xslb=xslb;
data.xx=xx;
data.cs=cs;
data.total=20;
var sj = $.toJSON(data);
//alert(sj);
localStorage.setItem("data",sj);
renderToHtml(data);
}
</script>
<script id="tp1" type="text/template">
<table>
<tr><td colspan=2>学校人数:${total} 学校名称: ${xx.name}</td></tr>
{@each cs as it,index}
<tr><td>-----------------------------</td><td>${cs, index | indexOf}</td></tr>
{@/each}
{@each xslb as it,index}
<tr > <td>学号</td><td> ${it.no}</td></tr>
<tr > <td>姓名</td><td>${it.name}</td></tr>
<tr > <td>年龄</td><td> ${it.age}</td></tr>
<tr > <td>成绩</td><td>
{@each it.cj as it2,index}
行号:${index}<br><hr>
名次:${it2.no}<br><hr>
姓名:${it2.name}<br><hr>
成绩:${it2.score}<br>
算术运算:${+it2.score/100}<br>
索引为字符串:${index+1}<br>
索引为数字:${+index+1}<br>
{@/each}
</td>
</div>
{@/each}
<table>
</script>
</head>
<body>
<div id="content"></div>
<input type="button" οnclick="read();" value="读取"></input>
</div>
</body>
</html>