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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
js Calender控件使用详解
Jan 05 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 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
Zend studio文件注释模板设置方法
2013/09/29 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
python双向链表实现实例代码
2013/11/21 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
黄金搭档广告词
2014/03/21 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
保密承诺书范文
2014/03/27 职场文书
新法人代表任命书
2014/06/06 职场文书
毕业生工作求职信
2014/06/30 职场文书
感谢信怎么写
2015/01/21 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技
windows server2008 开启端口的实现方法
2022/06/25 Servers