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连接access数据库的方法
Nov 17 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
基于node.js之调试器详解
Aug 22 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
微信小程序 冒泡事件原理解析
Sep 27 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对象的方法
2006/10/09 PHP
多文件上传的例子
2006/10/09 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
json 定义
2008/06/10 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
详解重置Django migration的常见方式
2019/02/15 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书