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打印网页部分内容的脚本
Nov 17 Javascript
JS常用表单验证方法总结
May 22 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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实现的最大正向匹配算法示例
2017/12/19 PHP
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python多进程控制学习小结
2018/10/31 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
大二学期个人自我评价
2014/01/13 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
公司开业庆典主持词
2014/03/21 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
结婚保证书
2015/01/16 职场文书
二手车转让协议书
2015/01/29 职场文书
思品教学工作总结
2015/08/10 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js