<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="author" content="hua" />
<script src="../js/jquery-1.8.1.min.js"></script>
<script src="../js/jsrender.min.js"></script>
<style>
.table201404120200{
}
.table201404120200 td{
border: solid 1px #CCCCCC;
}
</style>
</head>
<body>
<div id="content20140412">
</div>
<!--jsrender 樣板宣告 (主樣板)-->
<script id="mainTmpl201404120200" type="text/x-jsrender">
<table width="400px" class='table201404120200'>
<thead>
<tr ><th colspan="4">{{:title}}</th></tr>
</thead>
<tbody>
<tr>
<td>品名</td>
<td>數量</td>
<td>成本</td>
<td>售價</td>
<td>價差</td> <!--呼叫 js method-->
<td>價差*2</td>
<td>index</td>
<td>color</td>
</tr>
</tr>
{{for data tmpl="#reportTmpl201404120200" /}}
</tbody>
</table>
</script>
<!--jsrender 樣板宣告 (子樣板)-->
<script id="reportTmpl201404120200" type="text/x-jsrender">
<tr>
<td>{{: nam }}</td>
<td>{{: quantity }}</td>
<td>{{: cost }}</td>
<td>{{: price}}</td>
<td>{{: ~method( price , cost)}}</td> <!--呼叫 js method-->
<td>{{: ~method( price , cost) * 2}}</td> <!--呼叫 js method-->
<td>{{: #index }}</td>
{{if #index % 2 == 0}}
<td style="background:#FF0080 ">#FF0080</td>
{{else}}
<td style="background:#FF8000 ">#FF8000</td>
{{/if}}
</tr>
</script>
<script>
(function(){
//資料,以資料驅動畫面
var report = {
title : '貨品資訊列表',
data : [
{
nam : '精工表',
quantity : 2,
cost : 10000,
price : 30000,
},
{
nam : '魯夫公仔',
quantity : 20,
cost : 100,
price : 399,
},
{
nam : 'RX-78 RG 1/144',
quantity : 10,
cost : 500,
price : 1000,
}
]
};
function difference(price, cost){
return price - cost;
}
var html = $("#mainTmpl201404120200").render(report , {method : difference});
//console.log(html);
$('#content20140412').html(html);
})();
</script>
</body>
沒有留言:
張貼留言