dot.js 填充table数据 作者：马育民 • 2020-10-02 22:48 • 阅读：10075 ### html ``` <table border="1"> <tr> <td></td> <td>缩略图</td> <td>名称</td> <td>价格</td> </tr> <tbody id="tableRows"></tbody> </table> <script id="gridTemp" type="text/x-dot-template"> {{~it:value:index}} <tr> <td><input type="checkbox" value="{{= value.id}}"/></td> <td><img src="{{= value.img }}" width="200px"/></td> <td>{{= value.name }}</td> <td>{{= value.price }}</td> </tr> {{~}} </script> <script src="js/jquery.min.js?v=2.1.4"></script> <script src="js/doT.js"></script> <script type="text/javascript"> function init(){ $.ajax({ url:'goods/list', type:'post', dataType:'json',//服务器端返回的数据格式是json data: { },//发给服务器端的数据 success:function(res){ //data:服务器端返回给浏览器端的数据 if(res.code==0){ //编译模板 var interation = doT.template( $('#gridTemp').html() ); //将数据显示到网页中 $( '#tableRows' ).html(interation( res.data )); }else{ alert(res.msg); } }, error:function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest); alert(textStatus); alert(errorThrown); } }); } window.onload=init; </script> ``` ### 数据格式 ``` {"data":[{"id":"29f26dd1fded49ec8843ca99f7a0a818","name":"asdfasdf","descrip":"","price":0,"tags":"","selling1":"","selling2":"","selling3":"","createTime":"Oct 2, 2020 5:34:37 PM","updateTime":"Oct 2, 2020 5:34:37 PM"},{"id":"fba5223daa184df0b84588d65ad3d5e7","img":"/lvyou/upload/1641f00d355847edacf4ac9fb7d8b565.png","name":"测试","descrip":"非打死对方","price":0,"tags":"234123,哈哈","selling1":"1234","selling2":"啊的说法","selling3":"asdfasdf","createTime":"Oct 2, 2020 7:56:40 PM","updateTime":"Oct 2, 2020 7:56:40 PM"},{"id":"86037a66d4514f1f973d0854897227fe","img":"upload/136c3f29cc974c3caa437a1be8f2cfa0.png","name":"2015","descrip":"asdfasdf","price":0,"tags":"安委发","selling1":"安委发","selling2":"","selling3":"","createTime":"Oct 2, 2020 8:15:53 PM","updateTime":"Oct 2, 2020 8:15:53 PM"}],"code":0} ``` 原文出处：http://malaoshi.top/show_1EF6MqKruVRU.html