今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的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. netty2---服务端和客户端

    客户端: package com.client; import java.net.InetSocketAddress; import java.util.Scanner; import java.ut ...

  2. VMWare 网络连接模式(bridged、NAT、host-only)详解

    转自VMWare 网络连接模式(bridged.NAT.host-only)详解 host-only 在某些特殊的网络调试环境中,如何要求将真实环境和虚拟环境隔离开,这时你就可采用host-only模 ...

  3. svn如何给新文件加锁

    第一步: 右键subversion(版本控制) 第二部:找到 subversion properties 第二部: add进行添加

  4. Linux下Mysql 操作命令

    Linux下Mysql 操作命令 一.连接MySQL 格式: mysql -h主机地址 -u用户名 -p用户密码 1.例1:连接到本机上的MYSQL. 首先在打开DOS窗口,然后进入目录 mysqlb ...

  5. Android应用程序用真机调试步骤

    仅供参考: 1.开启调试模式     2.安装 Adb.exe 将platform-tools文件夹里面adb.exe AdbWinApi.dll AdbWinUsbApi.dll拷贝到tools   ...

  6. Windows 2008下系统网站运行环境的搭建

    1.右击[计算机]-->[管理],进入到”服务器管理器” 界面,如图所示: 2.依次展开[角色]-->[Web服务器(IIS)]-->[Internet 信息服务(IIS)管理器], ...

  7. OpenGL核心技术之Shadow Mapping改进版

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  8. Docker在渗透中的应用

    起因 环境因素影响,我他么路由器映射端口 msf就是反弹不回来session,在跟大牛交流后,大牛说服务器装个kali就行了,我以为是叫idc那边直接安装,但是因为这个系统特殊,很多 idc不允许安装 ...

  9. JS中函数之外不能写return

    JS中return有时会遇到这种情况,具体表现为:google浏览器等浏览器可以继续执行,IE浏览器不能执行return,并且google浏览器:执行时会显示SyntaxError: Illegal ...

  10. Json -- 语法和示例，javascript 解析Json

    1. 语法 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不 ...