<!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. rpm方式安装gcc缺少依赖项的解决方法

    使用rpm方式安装gcc时,有时会报缺少依赖项: libmpfr.so.1 is needed by cpp-4.4.4-13.el6.i686 libppl.so.7 is needed by cl ...

  2. [C#]将千分位字符串转换成数字

    关键代码: /// <summary> /// 将千分位字符串转换成数字 /// 说明:将诸如"–111,222,333的千分位"转换成-111222333数字 /// ...

  3. c#的多线程

    多线程的使用方法: Thread t = new Thread(new ThreadStart (StartMethod)); t.Start(); private void StartMethod( ...

  4. ECSHOP订单一键发货简化订单发货流程

    第一步: 在templates/order_info.htm文件找到: {if $operable_list.confirm}       <input name="confirm&q ...

  5. 第四章 Web表单

    4.1 跨站请求伪造保护 安装flask-wtf app = Flask(__name__) app.config['SECRET_KEY'] = 'hard to guess string' 密钥不 ...

  6. sscanf用法简析

    1. 常见用法. char buf[512] = ; sscanf("123456 ", "%s", buf); printf("%s\n" ...

  7. 【mapping】 springmvc的注解mapping无法生效的问题

    springmvc 始终无法加载 注解 map, 解决办法 八月 11, 2015 8:24:42 下午 org.springframework.web.servlet.DispatcherServl ...

  8. 关于如何学好游戏3D引擎编程的一些经验[转]

    此篇文章献给那些为了游戏编程不怕困难的热血青年,它的神秘要我永远不间断的去挑战自我,超越自我,这样才能攀登到游戏技术的最高峰 ——阿哲VS自己 QQ79134054多希望大家一起交流与沟通 这篇文章是 ...

  9. bat写的自动部署脚本

    windows7的机器上重启服务需要关闭UAC ::编译部署项目 echo off echo 1. GatewayAdaptor echo 2. LogicService echo 3. Messag ...

  10. delphi xe5 android listbox的 TMetropolisUIListBoxItem

    listbox实现以下效果: \ 关键代码,采用数据集的方式 type PpatientData=^RpatientData; RpatientData= record patient_id:stri ...