<!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. js实现浏览器兼容复制功能

    经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中.其实这个功能实现起来也不难,核心就是用到了window子对象clipboardData的一个方法:setData()语法 ...

  2. tar解压去除文件夹

    tar zxvf test.tar.gz  --strip-components 1 解压到当前目录,并去除一级目录

  3. PHP中进制之间的互相转换

    常见的进制: 二进制   binary   ----->  bin 八进制   octal     ----->  oct 十进制   decimal ----->  dec 十六进 ...

  4. 修改ECSHOP，支持图片云存储化（分离到专用图片服务器）

    为了提高页面加载速度和适应中国复杂的网络环境,我决定把所有商品图片都分离到专业的云存储服务器上,具有CDN加速功能. 首先,生成一个域名 img.xxxx.com 并映射到自己的云存储别名,然后把全部 ...

  5. 2015版App推广全攻略（完整版）

    线上渠道 1.基础上线 各大手机厂商市场.第三方应用商店.大平台.PC下载站.手机WAP站.收录站.移动互联网应用推荐媒体等等基本可以覆盖Android版本发布渠 道:推广的第一步是要上线,这是最基础 ...

  6. SqlBulkCoy和普通数据库操作执行速度对比

    SQLBulkCopy,用于数据库之间大批量的数据传递.通常用于新,旧数据库之间数据的更新.即使表结构完全不同,也可以通过字段间的对应关系,顺利的将数据导过来. 1.初始化SqlBulkCopy对象, ...

  7. dos下的edit命令使用详解

    dos下的edit命令使用详解 来源:网络 作者:未知 edit命令是一个简单的编辑软件,我们经常用它来编辑一些程序和批处理文件. 比如,我想在c盘根目录下编辑一个简单的批处理文件,要求无论当前盘和当 ...

  8. 实时动态更新曲线图，x轴时间s随数据的变化而变化

    $(function () {    $(document).ready(function () {        Highcharts.setOptions({            global: ...

  9. 导出Excel文件

    /// <summary> /// 类说明:Assistant /// 更新网站:[url=http://www.sufeinet.com/thread-655-1-1.html]http ...

  10. MySQL注入中load_file()函数的应用

    常用的一些Load_File()函数攻击手法: