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

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstra ...

  2. IE10、火狐浏、谷歌浏览器 KindEditor无法获取textarea值

    http://e-mailwu.blog.163.com/blog/static/651040362013311160913/ 在IE10.火狐浏览器.谷歌浏览器下后台KindEditor在线编辑器无 ...

  3. MapReduce概述

    MapReduce 源自于Google的MapReduce论文,Hadoop MapReduce是Google MapReduce克隆版 MapReduce适合PB级以上海量数据的离线处理 MapRe ...

  4. CSS3自定义滚动条样式 之 -webkit-scrollbar

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  5. 对于C++指针的详细理解

    (1)每一个变量都有一个内存位置,每一个内存位置都定义了可使用连字号(&)运算符访问的地址,它表示了在内存中的一个地址.  eg: int var1; &var1  表示var1的地址 ...

  6. gh-ost测试

    gh-ost测试 1.不支持没有主键或者唯一索引的表 2018-08-24 09:53:33 FATAL No PRIMARY nor UNIQUE key found in table! Baili ...

  7. HTML5相册浏览插件

    在线演示 本地下载

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

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

  9. React Native 网络请求封装：使用Promise封装fetch请求

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  10. ElasticSearch高可用集群环境搭建和分片原理

    1.ES是如何实现分布式高并发全文检索 2.简单介绍ES分片Shards分片技术 3.为什么ES主分片对应的备分片不在同一台节点存放 4.索引的主分片定义好后为什么不能做修改 5.ES如何实现高可用容 ...