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 格式字符串的应用
Mar 29 Javascript
javascript string字符串优化问题
Jul 31 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
js实现文本框选中的方法
May 26 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
PHP注释实例技巧
2008/10/03 PHP
php 破解防盗链图片函数
2008/12/09 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
详解jQuery事件
2017/01/13 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
如何基于python实现脚本加密
2019/12/28 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
公司爱心捐款倡议书
2014/05/14 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2014年维稳工作总结
2014/11/18 职场文书
四年级小学生评语
2014/12/26 职场文书
公司慰问信范文
2015/03/23 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
运动会新闻报道稿
2015/07/22 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
导游词之山东孔庙
2019/11/04 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL