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 29 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
详解vue中axios的封装
Jul 18 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 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
zf框架db类的分页示例分享
2014/03/14 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
Javascript !!的作用
2008/12/04 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python实现在线程里运行scrapy的方法
2015/04/07 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python入门之后再看点什么好?
2018/03/05 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
个人职业生涯规划书1500字
2013/12/31 职场文书
教育孩子心得体会
2014/01/01 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
户外宣传策划方案
2014/05/25 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2016情人节宣传语
2015/07/14 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
Java spring单点登录系统
2021/09/04 Java/Android