<!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. HttpWebRequest中的SendChunked

    MSDN上说:When SendChunked is true, the request sends data to the Internet resource in segments. The In ...

  2. 远程连接Ucenter数据库

    网站和Ucenter不是同一服务器的连接方法~我折腾了好几天,终于找到了这方法!各位连接不上的不妨试试~什么事只有试过才知道行不行! define('UC_CONNECT', 'mysql'); de ...

  3. 上传头像,界面无跳转,php+js

    上传头像,界面无跳转的方式很多,我用的是加个iframe那种.下面直接上代码. html: //route 为后端接口//upload/avatar 为上传的头像的保存地址//imgurl=/uplo ...

  4. ctrl+c关闭多线程python程序

    项目中经常需要用到多线程,如果一个python程序用了多线程,当子线程没有结束时,用ctrl+c是关闭不了主线程的,这时候就只能用kill命令杀掉,这样会很麻烦. 所以探讨了下怎么ctrl+C关闭多线 ...

  5. Oracle11g用户密码过期

    今天一早来了,发现部署的网站访问报500,看日志,显示数据库连不上.然后我用sqldeveloper登录同样登不上,于是想到了之前碰到过的一个问题,Oralce11g的新特性:密码180天自动过期.随 ...

  6. 深入研究java.lang.ProcessBuilder类

     深入研究java.lang.ProcessBuilder类 一.概述       ProcessBuilder类是J2SE 1.5在java.lang中新添加的一个新类,此类用于创建操作系统进程,它 ...

  7. c++ 输入一行字符串

    ]; //cin>>str1; 方式1 不能统计(录入)空格后的字符 cin.); //方式2 能统计空格后输入的字符 按回车键输入结束 get()会将换行符保存在序列里 //gets(s ...

  8. [JavaScript] 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...

  9. Oracle的登录操作

    在完美的启动Oracle数据库之后就可以登录数据库了: 1. 首先登录时使用的用户名默认是“SYSTEM”密码是你安装的时候自行设置的. 登录使用的命令是“sqlplus / as sysdba”之后 ...

  10. BZOJ 3929 Circle of digits 解题报告

    首先,我们可以得到最高位的位数为:\(\lfloor\frac{n+k-1}{n}\rfloor\),记作 \(E\). 然后给这 \(n\) 个长为 \(E\) 的数字排序,后缀数组 \(O((n+ ...