<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>json数据</title>

    <style type="text/css">

    .header{font-size:12px;line-height:22px;width:100px;text-align:center;border-bottom: 1px solid #A5ACB5;border-right: 1px solid #A5ACB5;background-color: #E7EBEF;}

    .cell{font-size:9px;line-height:22px;text-align:center;border-bottom: 1px solid #d2d2d2;border-right: 1px solid #d2d2d2; }

    </style>

</head>

<body>

    <input type="button" onclick="createCell()" value="createCell()" />

</body>

</html>

<script type="text/javascript">

    var data = [

        { name: "张三", email: "123456@qq.com", gender: "男", number: "000001" },

        { name: "张三", email: "123456@qq.com", gender: "男", number: "000001" },

        { name: "张三", email: "123456@qq.com", gender: "男", number: "000001" }

    ]

    function createCell() {

        var sb = [];

        sb[sb.length] = createHeader();

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

            var row = data[i];

            sb[sb.length] = '<tr>';

            sb[sb.length] = '<td class="cell">' + row.name + '</td>';

            sb[sb.length] = '<td class="cell">' + row.email + '</td>';

            sb[sb.length] = '<td class="cell">' + row.gender + '</td>';

            sb[sb.length] = '<td class="cell">' + row.number + '</td>';

            sb[sb.length] = '</tr>';

        }

        sb[sb.length] = '</table>';

        document.body.innerHTML = sb.join('');

    }

    function createHeader(){

        var headerHtml = '<table cellpadding=0 cellspacing=0 style="table-layout:fixed;border:1px solid #A5ACB5;">'

        + '<tr>'

        + '<td class="header">姓名</td>'

        + '<td class="header">邮件</td>'

        + '<td class="header">性别</td>'

        + '<td class="header">编号</td>'

        + '</tr>';

        return headerHtml;

    }

</script>

　　

table显示json数据传递的更多相关文章

  1. WPF：使用Json.NET在TreeView中树形显示JSON数据

    原文 WPF:使用Json.NET在TreeView中树形显示JSON数据 据 读者可以参考这个开源的可以树形显示XML和JSON的工具: Mgen Object 603:XML/JSON树形显示小工 ...

  2. 【转】让浏览器格式化显示JSON数据之chrome jsonView插件安装

    jsonView 用来让Chrome浏览器能格式化的显示JSON数据. 以上是网上找的方式,且试验成功! 步骤: 1.打开 https://github.com : 2.搜索 jsonView 链接: ...

  3. SpringMVC之json数据传递

    json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每 ...

  4. 飘逸的python - 命令行漂亮的显示json数据

    之前做的一个脚本把信息用json格式存到文本中.这样的好处是简便,易编辑,并且拥有强大的表达能力. 不过从文本cat出来的是一堆很难看的字符串,没换行和缩进.这时候就在想,如果有个类似于IDE的格式化 ...

  5. Spring MVC Json数据传递

    json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每 ...

  6. express后端和fetch前端的json数据传递

    在使用express做后端,前端使用fetch API来请求后端时,一般都是用 JSON 数据进行通信的. 下面是一个简单的例子: 前端: if (up) { var passwordAgain = ...

  7. jquery插件-table转Json数据插件

    使 用开源插件Table-to-json: 官方地址:http://lightswitch05.github.io/table-to-json/ 功能说明:将js对象table转换成javascrip ...

  8. jQuery格式化显示json数据

    一.概述 JSONView 在gitlab上面,有一个jQuery JSONView插件,地址为:https://github.com/yesmeck/jquery-jsonview demo地址:h ...

  9. jq之ajax以及json数据传递

    <html> <head><meta http-equiv="Content-Type" content="text/html; chars ...

随机推荐

  1. 扩展：gridview 空数据时显示表头

    2015年7月14日16:50:06  Gridview 默认展示数据时,若数据为空,则表格不显示,显示不美观. 针对此问题进行扩展: using System.Web.UI.WebControls; ...

  2. 使用weinre通过PC浏览器调试手机网页

    Weinre是什么? Weinre代表Web Inspector Remote,是一种远程调试工具.举个例子,在电脑上可以即时的更改手机上对应网页的页面元素.样式表, 或是查看Javascript变量 ...

  3. 【2】认识Bootstrap

    作为当下最流行的前端开发框架Bootstrap,它可大大简化网站开发过程,从而深受广大开发者的喜欢,当然你去它的官网中文网站就能看到大大的小标定义:“简洁.直观.强悍.移动设备优先的前端开发框架,让w ...

  4. mysql查看表结构命令

    mysql查看表结构命令 mysql查看表结构命令,如下: desc 表名;show columns from 表名;describe 表名;show create table 表名; use inf ...

  5. 设置BootStrap导航条的高度

    只要加上这段css就可以覆盖Bootstrap.css的代码,定制符合自己的样式 .navbar { min-height: 40px; } .nav > li > a { padding ...

  6. Linux下相关查找文件命令(find locate which whereis type)

    以下内容摘自:http://blog.csdn.net/jessica1201/article/details/8139249 标注的内容为自己的补充: 我们经常需要在系统中查找一个文件,那么在lin ...

  7. 《暗黑世界GM管理后台系统》部署+功能说明

    原地址:http://blog.csdn.net/uxqclm/article/details/11969761 欢迎来到9秒:www.9miao.com 暗黑三国管理后台说明文档 (一)功能描述该后 ...

  8. Python安装模块出错（ImportError: No module named setuptools）解决方法

    原地址:http://www.cnblogs.com/BeginMan/archive/2013/05/28/3104928.html 在window平台下安装第三方模块时,出现这样的错误:

  9. URAL 1119. Metro（BFS）

    点我看题目 题意  : 这个人在左下角,地铁在右上角,由很多格子组成的地图,每一条边都是一条路,每一条边都是100米.还有的可以走对角线,问你从起点到终点最短是多少. 思路 : 其实我想说一下,,,, ...

  10. OpenSSL 与 SSL 数字证书概念贴

    SSL/TLS 介绍见文章 SSL/TLS原理详解(http://seanlook.com/2015/01/07/tls-ssl). 如果你想快速自建CA然后签发数字证书,请移步 基于OpenSSL自 ...