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 相关文章推荐
eval的两组性能测试数据
Aug 17 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
javascript常见用法总结
May 22 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vue iview实现动态新增和删除
Jun 17 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
mysql5详细安装教程
2007/01/15 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
解决uWSGI的编码问题详解
2017/03/24 Python
python如何使用unittest测试接口
2018/04/04 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python实现可变变量名方法详解
2019/07/01 Python
深入解析神经网络从原理到实现
2019/07/26 Python
python中有帮助函数吗
2020/06/19 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
拾金不昧的表扬信
2014/01/16 职场文书
社区活动总结报告
2014/05/05 职场文书
地质灾害防治方案
2014/05/14 职场文书
增值税发票丢失证明
2015/06/19 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
JS实现简单九宫格抽奖
2022/06/28 Javascript