请忽视各种class，因为前端用的是layui
<table lay-skin="line"> <colgroup> <col> <col> <col> </colgroup> <thead> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>
js代码
<script> var data = [{ "id": 1, "url": "http://www.jqcool.net", "switch": 1, "order": 1, "pid": 0, "title": "Online Program knowledge share and study platform" }, { "id": 2, "url": "http://www.baidu.com", "switch": 0, "order": 2, "pid": 2, "title": "这是测试的数数据这是测试的数数据" }, { "id": 3, "url": "http://www.taobao.com", "switch": 0, "order": 3, "pid": 2, "title": "淘宝购物" }, { "id": 4, "url": "http://www.jqcool.net1", "switch": 1, "order": 4, "pid": 2, "title": "Online Program knowledge share and study platform2" }, { "id": 5, "url": "http://www.baidu.com1", "switch": 0, "order": 5, "pid": 2, "title": "这是测试的数数据2" }, { "id": 6, "url": "http://www.taobao.com1", "switch": 1, "order": 6, "pid": 0, "title": "淘宝购物2" }]; $.each(data, function (i, n) { var row = $("#template").clone(); row.find("#id").text(n.id); row.find("#url").text(n.url); row.find("#title").text(n.title); row.appendTo("#datas");//添加到模板的容器中 }); </script>
效果
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》