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

    一.部署samba Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成,Samba主要用于Linux或UNIX和Windows系统之间的文件共享. SMB( ...

  2. mybatis 插入之后返回id

    usermapper.xml <insert id="insert" parameterType="app.models.User" keyPropert ...

  3. 对Java 注解的一些理解

    转载自https://blog.csdn.net/javazejian/article/details/71860633 引入 注解最简单的使用方式 Java注解与普通修饰符(public\stati ...

  4. JAVA中字符串问题

    JAVA中对象创建 通过new关键字来创建对象 通过newInstance()方法来创建对象 使用反序列化机制中IO流中恢复Java对象 通过clone()方法复制一个对象 直接量方式,String ...

  5. JavaScript创建类的三种方式

    //第一种 创建类方法. // 用方法模拟 构造函数. function classobj() { this.name = 'xiaoming'; } classobj.text = 'text'; ...

  6. Django如何把数据库里的html格式输出到前端

    只需在HTML页面中加入{% autoescape off %}即可! {% autoescape off %} 需要显示的数据 (% endautoescap %}

  7. pxe-kickstart批量部署文档

    #PXE安装: yum install syslinux xinetd tftp-server httpd -y yum install dhcp -y yum install system-conf ...

  8. Apache配置的5个技巧

    AcceptMutex Apache 1.3.21和Apache 2.0中引入了AcceptMutex 指示符,该指示符给调节服务器的性能带来了一个难得的机会.该指示符配置Apache的accept( ...

  9. Mysql数据库导出sql脚本

    1. 运行环境Centos mysqldump -h localhost -u root -p etv > ./etv.sql etv 是要导出的数据库名 > 设置导出的路径和文件名

  10. UVA 10900 So you want to be a 2n-aire? （概率dp）

    题意:玩家初始的金额为1:给出n,表示有n道题目:t表示说答对一道题目的概率在t到1之间均匀分布. 每次面对一道题,可以选择结束游戏,获得当前奖金:或者回答下一道问题,答对的话奖金翻倍,答错的话结束游 ...