JavaScript根据json生成html表格的示例代码

之前公司有一个需求是:通过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"}),输出<table cellpadding="10" border="1">
end () 创建上一个start函数的标签尾 上面执行了start("table"),再执行end(),输出</table>
tag (tag, attr, text) 创建封闭标签 tag("th", {"bgcolor": "AntiqueWhite"}, "hello"),输出<th bgcolor="AntiqueWhite">hello</th>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 根据json字符串生成Html的一种方式

    文章说明:本文介绍了根据Json串生成Html的一种方式(只是简单实现了文本框,密码框,下拉框).只是觉得好玩才这样做,如果觉得没有任何价值,请忽略.不足指出希望各位大牛指点.后续将根据各位的指点继续完善. 功能说明: 在左侧输入框中输入Json串,点击执行时根据输入的Json串在右侧展示区显示出相应的Html(使用Jquery1.4.4) HTML: 复制代码 代码如下: <table style="width:100%; "> <col width="2

  • JavaScript根据json生成html表格的示例代码

    之前公司有一个需求是:通过js来生成html.而且大部分都是生成表格,直接通过字符串拼接的话,代码的可复用性太低的,所以写了个通用的json转html表格的工具. 代码 htmlKit = { _tags: [], html: [], _createAttrs: function (attrs) { var attrStr = []; for (var key in attrs) { if (!attrs.hasOwnProperty(key)) continue; attrStr.push(k

  • Python实现自动整理表格的示例代码

    目录 前言 原理 目标实现 运行效果 前言 今天,在工作的时候,我的美女同事问我有没有办法自动生成一个这样的表格: 第一列是院校+科目,第二列是年份,第三列是数量. 这张表格是基于这一文件夹填充的,之前要一个文件夹一个文件夹打开然后手动填写年份和数量 手动整理需要耗费较长时间,于是我便开发了一个 Python 程序用来自动生成归纳表格 利用正则表达式+OS库+openpyxl生成真题年份归纳表格 原理 第一步,遍历文件夹下的所有文件和子文件夹的名称,并获取子文件夹下的文件的年份信息和数量信息 第

  • vue生成随机验证码的示例代码

    本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"

  • JavaScript使用Ajax上传文件的示例代码

    本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&

  • java 生成文字图片的示例代码

    本文主要介绍了java 生成文字图片的示例代码,分享给大家,具体如下: import java.awt.Color; import java.awt.Font; import java.awt.FontMetrics; import java.awt.Graphics; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO;

  • javascript实现Emrips反质数枚举的示例代码

    今天看到一个kata,提出一个"emirps"的概念:一个质数倒转后得到的是一个不同的质数,这个数叫做"emirps". 例如:13,17是质数,31,71也是质数,13和17是"emirps". 但是质数757,787,797是回文质数,这意味着反转的数字与原始数字相同,所以它们不被认为是"emirps". 题目要求写一个函数输入一个正整数n,返回小于n的"emirps"的个数,其中最大"emi

  • Python实现Word表格转成Excel表格的示例代码

    准备工作 pip install docx pip install openpyxl 具体代码 # 没有的先pip install 包名称 from docx import Document from openpyxl import Workbook document = Document('Docx文件路径.dicx') count = 0 tables = [] wb = Workbook() ws = wb.active # 设置列数,可以指定列名称,有几列就设置几个, # A对应列1,B

  • SpringBoot读取excel表格的示例代码

    SpringBoot读取excel表格 共同探讨,向各位大佬学习 走向CEO,迎娶白富美 pom.xml依赖 <!--springboot核心依赖--> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.4.RELEASE</vers

  • 使用numpngw和matplotlib生成png动画的示例代码

    在matplotlib官网看到了第三方库numpngw的简介,利用该库作为插件可以辅助matplotlib生成png动画. numpngw概述 numpngw库可生成PNG静态图像和PNG动画. 通过write_png函数可以将 numpy保存为PNG 文件. 通过 write_apng 函数可以将数组序列保存为 PNG 动画(APNG)文件 . 通过AnimatedPNGWriter类可以将Matplotlib 保存为PNG动画文件. numpngw库的依赖包是numpy和setuptools

  • Python将QQ聊天记录生成词云的示例代码

    在这个情人节前夕,我把现任对象回收掉了,这段感情积攒了太多的失望,也给了我太多的伤害,所以我看到这个活动的第一反应是拒绝的.然而人生嘛,最重要的就是体验,沉浸在过去的回忆里没有意义,积极面对才能让自己更好地重振旗鼓. 所以,当大家都一致地在这个活动里各种秀恩爱时,我决定走一条不一样的路来为单身狗和刚分手的小伙伴们打打气:时间能改变的,是那些原本就不坚定的东西,未来的路还很长,笑一笑,一切都会过去的! 言归正传,我们要做的任务是,把 QQ 分手聊天记录导出,使用 Python 分词后做成分开的桃心

随机推荐