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 相关文章推荐
jquery下checked取值问题的解决方法
Aug 09 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
使用javascript获取页面名称
Dec 23 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
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与Java对比学习日期时间函数
2016/07/03 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
深入研究React中setState源码
2017/11/17 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
python rsa 加密解密
2017/03/20 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
django url到views参数传递的实例
2019/07/19 Python
python函数的作用域及关键字详解
2019/08/20 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python 字典的打印实现
2019/09/26 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
Python类的继承super相关原理解析
2020/10/22 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
为什么要用EJB
2014/04/17 面试题
工作个人的自我评价
2014/01/14 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
给校长的一封建议书
2014/03/12 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
学校督导评估方案
2014/06/10 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
酒店宣传语大全
2015/07/13 职场文书