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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
javascript中的事件代理初探
Mar 08 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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动态变静态原理
2006/11/25 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php操作mongoDB实例分析
2014/12/29 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
PHP PDO操作总结
2014/11/17 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
详解如何设置Python环境变量?
2019/05/13 Python
python如何制作英文字典
2019/06/25 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
财务会计专业毕业生自荐信
2013/10/02 职场文书
公司给客户的感谢信
2015/01/23 职场文书
PHP策略模式写法
2021/04/01 PHP
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
zabbix配置nginx监控的实现
2022/05/25 Servers