在html文件引用Jquery的tmpl插件后可以为数据动态建立表格并显示到界面上,下载地址:jquery-tmpl-master.zip
1.首先在html里引入脚本
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="jquery.tmpl.min.js"></script>
2.在html文件里编写表格模板(记得设置ID)
${}为输出变量,{}中是你要输出的变量名称
例如:
<script type="text/x-jquery-tmpl" id="trPemp"> //type必须写
<tr>
<td >${classification}</td>
<td >${name}</td>
<td >${price}</td>
<td >${unit}</td>
</tr>
</script>
3.在html的body中编写你要显示的内容
例如:
<table id="tableList">
<th >分类</th>
<th >名称</th>
<th >单价(元)</th>
<th >单位</th>
</table>
4.在js文件中创建函数用来填写模板
例如: function addGoodsList() { //定义需要显示的数据 var cartList = [ {classification: "饮料",name: "可口可乐", price: "3", unit: "瓶"}, {classification: "饮料",name: "雪碧", price : "3", unit: "瓶"}, {classification: "水果", name: "苹果", price : "5.5", unit: "斤"}, {classification: "水果", name: "荔枝", price: "15", unit: "斤"}, {classification: "生活用品",name: "电池", price : "2", unit: "个"} ] //填写模板,用tmpl()将定义的数据填写到编写的模板里appendTo()在被选元素的结尾处插入填写好的模板,自动生成表格 $("#trPemp").tmpl(cartList).appendTo('#tableList'); }
5.显示的效果
分类 | 名称 | 单价(元) | 单位 |
饮料 | 可口可乐 | 3 | 瓶 |
饮料 | 雪碧 | 3 | 瓶 |
水果 | 苹果 | 5.5 | 斤 |
水果 | 荔枝 | 15 | 斤 |
生活用品 | 电池 | 2 | 个 |