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版代码高亮
Jun 26 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
JavaScript 原型与原型链详情
Nov 02 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类常量的使用详解
2013/06/08 PHP
Js sort排序使用方法
2011/10/17 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python常用库推荐
2016/12/04 Python
详解Python文本操作相关模块
2017/06/22 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
航空大学应届生求职信
2013/11/10 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
可可西里观后感
2015/06/08 职场文书
班级管理经验交流材料
2015/11/02 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL