做的一个模板引擎绑定Json数据的一个模板引擎,小巧便捷,简单易懂,适合json小数据
效果图
HTML
<table id="table1" class="t1" > <thead> <tr> <th>编号</th> <th>星期</th> <th>次数</th> <th>营销类型</th> <th colspan="2">操作</th> </tr> </thead> <tbody id="tbody1"> <tr> <td>{ID}</td> <td>{Week}</td> <td>{counts}</td> <td>{Types}</td> <td><input type="button" value="编辑" onclick="editor('{ID}')" /></td> <td><input type="button" value="删除" onclick="deletes('{ID}')" /></td> </tr> </tbody> </table>
JavaScript 引擎方法
function temp(json,id) { var doc = document.getElementById(id); var _html = ""; var docHtmls = doc.innerHTML.replace(/[\r\t\n]/g, " "); for (var i = 0; i < json.length; i++) { var innerHtmls = docHtmls; for (var _json in json[i]) { var value = eval("(json[i]." + _json + ")");//==>json[i].ID var _replace = new RegExp("[{]" + _json + "[}]", "g"); innerHtmls = innerHtmls.replace(_replace, value); } _html += innerHtmls; } doc.innerHTML = _html; }
调用
temp(json, "doc");
测试Json
注,在调用json字符串时,一定要将json字符串转出json对象,可以使用 eval("("+json字符串+")")
[{"ID":1,"Week":"周一","counts":"320","Types":"邮件营销","ord":1},{"ID":8,"Week":"周一","counts":"120","Types":"联盟广告","ord":1},{"ID":15,"Week":"周一","counts":"150","Types":"视频广告","ord":1},{"ID":22,"Week":"周一","counts":"320","Types":"直接访问","ord":1},{"ID":29,"Week":"周一","counts":"820","Types":"搜索引擎","ord":1},{"ID":2,"Week":"周二","counts":"332","Types":"邮件营销","ord":2},{"ID":9,"Week":"周二","counts":"132","Types":"联盟广告","ord":2},{"ID":16,"Week":"周二","counts":"232","Types":"视频广告","ord":2},{"ID":23,"Week":"周二","counts":"332","Types":"直接访问","ord":2},{"ID":30,"Week":"周二","counts":"932","Types":"搜索引擎","ord":2},{"ID":3,"Week":"周三","counts":"301","Types":"邮件营销","ord":3},{"ID":10,"Week":"周三","counts":"101","Types":"联盟广告","ord":3},{"ID":17,"Week":"周三","counts":"201","Types":"视频广告","ord":3},{"ID":24,"Week":"周三","counts":"301","Types":"直接访问","ord":3},{"ID":31,"Week":"周三","counts":"901","Types":"搜索引擎","ord":3},{"ID":4,"Week":"周四","counts":"334","Types":"邮件营销","ord":4},{"ID":11,"Week":"周四","counts":"134","Types":"联盟广告","ord":4},{"ID":18,"Week":"周四","counts":"154","Types":"视频广告","ord":4},{"ID":25,"Week":"周四","counts":"334","Types":"直接访问","ord":4},{"ID":32,"Week":"周四","counts":"934","Types":"搜索引擎","ord":4},{"ID":5,"Week":"周五","counts":"390","Types":"邮件营销","ord":5},{"ID":12,"Week":"周五","counts":"90","Types":"联盟广告","ord":5},{"ID":19,"Week":"周五","counts":"190","Types":"视频广告","ord":5},{"ID":26,"Week":"周五","counts":"390","Types":"直接访问","ord":5},{"ID":33,"Week":"周五","counts":"1290","Types":"搜索引擎","ord":5},{"ID":6,"Week":"周六","counts":"330","Types":"邮件营销","ord":6},{"ID":13,"Week":"周六","counts":"230","Types":"联盟广告","ord":6},{"ID":20,"Week":"周六","counts":"330","Types":"视频广告","ord":6},{"ID":27,"Week":"周六","counts":"330","Types":"直接访问","ord":6},{"ID":34,"Week":"周六","counts":"1330","Types":"搜索引擎","ord":6},{"ID":7,"Week":"周日","counts":"320","Types":"邮件营销","ord":7},{"ID":14,"Week":"周日","counts":"210","Types":"联盟广告","ord":7},{"ID":21,"Week":"周日","counts":"410","Types":"视频广告","ord":7},{"ID":28,"Week":"周日","counts":"320","Types":"直接访问","ord":7},{"ID":35,"Week":"周日","counts":"1320","Types":"搜索引擎","ord":7}]