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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
js Math 对象的方法
Sep 01 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
JavaScript常用工具方法封装
Feb 12 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
Node 代理访问的实现
Sep 19 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 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的一个登录的类 [推荐]
2007/03/16 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php常用正则函数实例小结
2016/12/29 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
python树的同构学习笔记
2019/09/14 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
护士实习自我鉴定
2013/10/22 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
人大调研汇报材料
2014/08/14 职场文书
会计师事务所实习证明
2014/11/16 职场文书
城南旧事读书笔记
2015/06/29 职场文书
六一儿童节致辞
2015/07/31 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Python学习开发之图形用户界面详解
2021/08/23 Python
详解redis在微服务领域的贡献
2021/10/16 Redis