今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的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. ZOJ - 3593 One Person Game (扩展欧几里得)

    题意:一个人在坐标A,要前往坐标B的位置.可以往左或往右走a,b,a+b个单位,求到达B的最小步数. 分析:扩展欧几里得算法求解线性方程的套路不变.令C=fabs(A-B),c = a+b, 扩展gc ...

  2. python 课堂笔记-while

    #Author:zyl age_of_oldboy = 56 count = 0 while count < 3: guess_age = int(input("guess age:& ...

  3. 菩提树下的杨过.Net 的《hadoop 2.6全分布安装》补充版

    对菩提树下的杨过.Net的这篇博客<hadoop 2.6全分布安装>,我真是佩服的五体投地,我第一次见过教程能写的这么言简意赅,但是又能比较准确表述每一步做法的,这篇博客主要就是在他的基础 ...

  4. lock关键字的用法

    一直以来对于lock关键字的用法都存有疑惑,也从网上看到很多关于他的资料包括MSDN,无奈MSDN讲述的真是让人上火.今天决定小小研究一下 一直都知道lock是锁定某一变量从而实现对某一代码段的独占执 ...

  5. SQL Server2012在软件开发中的一些新特性

    官方给出了一大堆SQL2012相对于SQL2008R2的新特性,但是大多数对于普通开发人员来说都是浮云,根本用不到,下面就说说一些对于开发人员来说比较有用的新特性.   一.在SQL Server中终 ...

  6. Java Override和@Override

    Override : 重写. 当子类的某个方法的方法名.返回值.参数列表均与父类的方法保持一致,我们就可以说子类重写了父类的该方法. 其中需要注意: 父类中修饰符为private, static, f ...

  7. tyvj 1055 沙子合并 区间dp经典模型，石子合并

    P1055 沙子合并 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述     设有N堆沙子排成一排,其编号为1,2,3,…,N(N<=300).每堆沙子 ...

  8. sklearn中预测模型的score函数

    sklearn.linear_model.LinearRegression.score score(self, X, y, sample_weight=None) Returns the coeffi ...

  9. c 结构体中存在指针,指针的不同赋值方法

    #include<stdio.h>#include<stdlib.h>#include<string.h>struct parameter{ char *fd; i ...

  10. 使用maven创建项目时报错The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path

    Description Resource Path Location Type The superclass "javax.servlet.http.HttpServlet" wa ...