Jquery插件tmpl的下载及用法

       在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	个