今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示,

其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以便下次使用

最终效果:

<!DOCTYPE HTML>

<html>

<head>

<title>利用json数据动态创建表格</title>

<meta charset="utf-8" />

<style>

table{width:600px;

border-collapse:collapse;

text-align:center;

}

td,th{border:1px solid #ccc}

</style>

</head>

<body>

<div id="data"></div>

<script>

var json=[

{"name":"王大", "salary":11000, "age":25},

{"name":"李二", "salary":13000, "age":22},

{"name":"张三", "salary":12000, "age":25}

];

//创建table

var table=

document.createElement("table");

//创建thead，并追加到table中

var thead=

document.createElement("thead");

table.appendChild(thead);

//创建tr,并追加到thead

var tr=

document.createElement("tr");

thead.appendChild(tr);

//json数组中第1个人的每个属性

for(var key in json[0]){

//创建th

var th=

document.createElement("th");

//设置th的内容为key

th.innerHTML=key;

//将th追加到tr中

tr.appendChild(th);

}

//创建tbody元素

var tbody=

document.createElement("tbody");

//将tbody追加到table中

table.appendChild(tbody);

//遍历json中所有员工

for(var i=0;i<json.length;i++){

//创建tr

var tr=

document.createElement("tr");

//遍历当前员工的每个属性

for(var key in json[i]){

//创建td

var td=

document.createElement("td");

//设置td的内容为当前员工的当前属性值

td.innerHTML=json[i][key];

//将td追加到tr

tr.appendChild(td);

}//(遍历结束)

//将tr追加到tbody中

tbody.appendChild(tr);

}

//将table添加到id为data的div下

document.getElementById("data")

.appendChild(table);

</script>

</body>

</html>

js将json数据动态生成表格的更多相关文章

  1. jQuery 根据JSON数据动态生成表格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery利用JSON数据动态生成表格

    <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; fon ...

  3. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  4. angular js根据json文件动态生成路由状态

    项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...

  5. 跨域jsonp+jQuery+json+html动态生成表格

    1.什么是跨域 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 凡是拥有scr这个属性 ...

  6. jsp页面根据json数据动态生成table

    根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...

  7. AJAX请求返回JSON数据动态生成html

    1:DeliveryPersonVO对象 package com.funcanteen.business.entity.delivery.vo; import java.util.List; impo ...

  8. 通过js根据后台数据动态生成一个页面

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExportSelField ...

  9. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

随机推荐

  1. Hadoop25---netty，单个handler

    ke客户端: package cn.itcast_03_netty.sendstring.client; import io.netty.bootstrap.Bootstrap; import io. ...

  2. MyBatis源码解读之延迟加载

    1. 目的 本文主要解读MyBatis 延迟加载实现原理 2. 延迟加载如何使用 Setting 参数配置 设置参数 描述 有效值 默认值 lazyLoadingEnabled 延迟加载的全局开关.当 ...

  3. 2018-2019-2 20165114《网络对抗技术》Exp1 逆向与Bof基础

    逆向及Bof基础实践 目录 一.实践目标 二.实验操作和步骤 1.直接修改程序机器指令 2.通过构造输入参数,造成BOF攻击. 3.注入Shellcode并执行 三.实验总结 四.实验遇到的错误和问题 ...

  4. float 为什么可以表示很大的整数

    1.float型:单精度浮点数在机内占4个字节,用32位二进制描述(注意:计算机中1个字节=8位). 2.浮点数在机内用指数型式表示,分解为:数符,尾数,指数符,指数四部分. 3.可以算出float型 ...

  5. Appium+eclipse+python环境配置

    1.安装安卓开发环境(教程很多,不细写) 2.安装eclipse 下载eclipse,解压即可   3.安装python 下载地址:https://www.python.org/downloads/r ...

  6. Chemistry

    Problem A. Chemistry Input file: chemistry.in Output file: chemistry.out Time limit: 1 seconds Memor ...

  7. 解析Linux系统的平均负载概念

    一.什么是系统平均负载(Load average)? 在Linux系统中,uptime.w.top等命令都会有系统平均负载load average的输出,那么什么是系统平均负载呢?系统平均负载被定义为 ...

  8. Java学习笔记50：JSONObject与JSONArray的使用（转）

    Java不像PHP解析和生产JSON总是一个比较痛苦的过程.但是使用JSONObject和JSONArray会让整个过程相对舒服一些. 需要依赖的包:commons-lang.jar commons- ...

  9. ZC_03_创建对象

    1. 正如 上一篇文章中所见,反射创建 类实例的方式,主要为2类: (1).Class对象.newInstance() 这是使用 默认的无参构造函数 创建对象 (2).Constructor对象.ne ...

  10. Spring简洁版总结

    一:为什么使用spring? spring泉眼,最好的水,在企业开发中,是业务层最好的框架 spring优点是什么? 1.低侵入,低耦合 2.方便集成其他框架 3.降低javaee开发难度 4.spr ...