js中根据json生成html表格的方法介绍(代码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于js中根据json生成html表格的方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

之前公司有一个需求是:通过js来生成html。而且大部分都是生成表格,直接通过字符串拼接的话,代码的可复用性太低的,所以写了个通用的json转html表格的工具。

代码

htmlKit = {     _tags: [], html: [],      _createAttrs: function (attrs) {         var attrStr = [];         for (var key in attrs) {             if (!attrs.hasOwnProperty(key)) continue;             attrStr.push(key + "=" + attrs[key] + "")         }         return attrStr.join(" ")     },      _createTag: function (tag, attrs, isStart) {         if (isStart) {             return "<" + tag + " " + this._createAttrs(attrs) + ">"         } else {             return "</" + tag + ">"         }     },      start: function (tag, attrs) {         this._tags.push(tag);         this.html.push(this._createTag(tag, attrs, true))     },      end: function () {         this.html.push(this._createTag(this._tags.pop(), null, false))     },      tag: function (tag, attr, text) {         this.html.push(this._createTag(tag, attr, true) + text + this._createTag(tag, null, false))     },      create: function () {         return this.html.join("")     } };  function json2Html(data) {     var hk = htmlKit;     hk.start("table", {"cellpadding": "10", "border": "1"});     hk.start("thead");     hk.start("tr");     data["heads"].forEach(function (head) {         hk.tag("th", {"bgcolor": "AntiqueWhite"}, head)     });     hk.end();     hk.end();     hk.start("tbody");     data["data"].forEach(function (dataList, i) {         dataList.forEach(function (_data) {             hk.start("tr");             data["dataKeys"][i].forEach(function (key) {                 var rowsAndCol = key.split(":");                 if (rowsAndCol.length === 1) {                     hk.tag("td", null, _data[rowsAndCol[0]])                 } else if (rowsAndCol.length === 3) {                     hk.tag("td", {"rowspan": rowsAndCol[0], "colspan": rowsAndCol[1]}, _data[rowsAndCol[2]])                 }             });             hk.end()         })     });     hk.end();     hk.end();     return hk.create() }

使用说明

HtmlKit

htmlKit是创建html标签的工具

函数

函数名 作用 例子
start (tag, attrs) 创建未封闭标签头 start("table", {"cellpadding": "10", "border": "1"}),输出<table cellpadding="10" border="1">
end () 创建上一个start函数的标签尾 上面执行了start(“table”),再执行end(),输出</table>
tag (tag, attr, text) 创建封闭标签 tag("th", {"bgcolor": "AntiqueWhite"}, "hello"),输出<th bgcolor="AntiqueWhite">hello</th>

json2Html

json转Html

例子:

var data = [     {         "chinese": 80,         "mathematics": 89,         "english": 90     } ];  var total = 0; data.forEach(function (value) {     for (key in value) {         total += value[key];     } });  var htmlMetadata = {     "heads": ["语文", "数学", "英语"],     "dataKeys": [["chinese", "mathematics", "english"], ["text","1:2:total"]], // rowspan:colspan:value     "data": [data, [{"text": "合计","total": total}]] };  var html = json2Html(htmlMetadata);  console.info(html);

输出结果(结果为了好看,格式化了):

<table cellpadding=10 border=1>     <thead>     <tr>         <th bgcolor=AntiqueWhite>语文</th>         <th bgcolor=AntiqueWhite>数学</th>         <th bgcolor=AntiqueWhite>英语</th>     </tr>     </thead>     <tbody>     <tr>         <td>80</td>         <td>89</td>         <td>90</td>     </tr>     <tr>         <td>合计</td>         <td rowspan=1 colspan=2>259</td>     </tr>     </tbody> </table>

效果:

语文 数学 英语
80 89 90
合计 259
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » js中根据json生成html表格的方法介绍(代码)

发表评论

提供最优质的资源集合

立即查看 了解详情