html代码
<div style="width:50%;height:50%;border:0px solid;margin-left:0px;padding-top:5px;position:relative;float:right;padding-right:3px;">
<table border="1" class="table table-bordered table-condensed" style="width:99%;">
<tr class="info"><td id="td1" style="width:80%;">名称</td><td id="td2" style="width:20%;">数值</td></tr>
<tbody id="frows">
</tbody>
</table>
</div>
包含文件
<script type="text/javascript" src="../bootstrap/js/jquery.tmpl.min.js"></script>
js代码
<script id="fTemplate" type="text/x-jquery-tmpl">
<tr><td>${Name}</td><td>${Value}</td></tr>
</script>
设置数据
<script>
$(document).ready(function() {
var dataf = [{ Name: '累计能耗', Value: 0 }, { Name: '实际节能量', Value: 0},
{ Name: '实际节能率', Value: 0 }, { Name: '空调温度平均值', Value: 0}];
$('#fTemplate').tmpl(dataf).appendTo('#frows');
});
</script>
如果使用ajax请求数据,则需要在赋值之前先把之前的dom数据清除,否则数据会在原数据后面附加数据。
//清空模板数据
$('#frows').empty();
效果