JavaScript根据json生成html表格的示例代码


Posted in Javascript onOctober 24, 2018

之前公司有一个需求是:通过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"}),输出
end () 创建上一个start函数的标签尾 上面执行了start("table"),再执行end(),输出
tag (tag, attr, text) 创建封闭标签 tag("th", {"bgcolor": "AntiqueWhite"}, "hello"),输出 hello

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript内核之基本概念
Oct 21 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue项目引入Iconfont图标库的教程图解
Oct 24 #Javascript
vue中的router-view组件的使用教程
Oct 23 #Javascript
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 #Javascript
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 #Javascript
You might like
php 图片上添加透明度渐变的效果
2009/06/29 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python入门篇之字符串
2014/10/17 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python看某个模块的版本方法
2018/10/16 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python绘制地震散点图
2019/06/18 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
标记环介质访问控制协议
2016/03/27 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
采购主管岗位职责
2014/02/01 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server