<!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. 点击UserControl中的按钮将值传给winform页面

    源码下载地址:http://download.csdn.net/detail/dora_zhh/7456521 1.如图所示,点击选择按钮弹出用户控件UserControl 2.点击确定按钮,将值传给 ...

  2. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  3. Android NFC标签 开发深度解析 触碰的艺术

    有几天没有更新博客了,不过本篇却准备了许久,希望能带给每一位开发者最简单高效的学习方式.废话到此为止,下面开始正文. NFC(Near Field Communication,近场通信)是一种数据传输 ...

  4. [Linux]root默认密码问题

    Linux/Ubuntu root默认密码问题   Ubuntu安装后root是没有默认的密码的,因为你还没给root设置密码,你第一个 user 是在 admin 组,他可以给 root 设置密码, ...

  5. struts2 修改action的后缀

    struts2 修改action的后缀 struts2 的默认后缀是 .action 虽然很直观,但是很烦琐.很多人喜欢将请求的后缀改为 .do 在struts2中修改action后缀有两种比较简单的 ...

  6. Python设计模式——设计原则

    1.单一职责原则:每个类都只有一个职责,修改一个类的理由只有一个 2.开放-封闭远程(OCP):开放是指可拓展性好,封闭是指一旦一个类写好了,就尽量不要修改里面的代码,通过拓展(继承,重写等)来使旧的 ...

  7. WPF 控件

    ****ScrollViewer**** 前台: <ScrollViewer  HorizontalScrollBarVisibility="Auto" VerticalSc ...

  8. Authentication for the REST APIs

    HTTP基本认证原理 在HTTP协议进行通信的过程中,HTTP协议定义了基本认证过程以允许HTTP服务器对WEB浏览器进行用户身份认证的方法,当一个客户端向HTTP服务器进行数据请求时,如果客户端未被 ...

  9. Qt 5 常见错误汇总

    1.没加 QT+=sql,需要再.pro文件中加上 2.无故崩溃,这个有多种原因,多为指针问题,例如,指针内存泄露,指针未开辟空间直接使用,UI还未建立就使用UI里面的东西..等等 3.Sql问题,有 ...

  10. CODEVS 2994 超级弹珠

    题目描述 Description 奶牛们最近从著名的奶牛玩具制造商Tycow那里,买了一套仿真版彩蛋游戏设备.Bessie把她们玩游戏的草坪划成了N*N单位的矩阵,同时列出了她的K个对手在草地上的位置 ...