效果图如下：

以下是代码：

<!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>

        <meta http-equiv="content-type" content="text/html;charset=gb2312">

        <style type="text/css">

        caption {

                padding: 0 0 5px 0;

                width: 450px;

                font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

                text-align: right;

                }

        td {

            border:1px solid #c1dad7;

            

            padding: 6px 6px 6px 12px;

            color: #4f6b72;

            text-align: center;

            width:150px;

            }

        </style>

        <script type="text/javascript">

       var data=[{name:'xiaoxiao',age:12,gender:'male'},{name:'xiao',age:22,gender:'male'},{name:'hh',age:12,gender:'female'},{name:'ran',age:20,gender:'female'}];

        

        //网页加载完成后执行该onload事件

onload = function(){

            var body=document.getElementsByTagName('body')[0];

            body.appendChild(createTable(data));

        };

        

        //根据传入的json数组创建表格

        var createTable = function(data){



            //定义表格

            var table=document.createElement('table');

            table.setAttribute('style','width: 450px;');



            //定义表格标题

            var caption=document.createElement('caption');

            caption.innerHTML ='学生信息表';



            //将标题添加进表格

            table.appendChild(caption);

            //调用createTr()方法生成标题行并将其添加到table中。

            table.appendChild(createTr('姓名','年龄','性别'));

            table.childNodes[1].setAttribute('style','background:#cae8ea;');

            //alert(table.firstChild);

            //for循环json对象,然后将循环到的对象通过createTr()方法生成行，添加到table中

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

                table.appendChild(createTr(data[i].name,data[i].age,data[i].gender));

            }

            return table;

        };   



        

        //根据用户传过来的变量生成表格中行的方法

        var createTr = function(name,age,gender){

            //定义行元素标签

            var tr=document.createElement('tr');

            //定义列元素标签

            var tdName=document.createElement('td');

            //设置该列节点的文本节点的值

            tdName.innerHTML = name;

            var tdAge = document.createElement('td');

            

            tdAge.innerHTML = age;

            var tdGender = document.createElement('td');

            

            tdGender.appendChild(document.createTextNode(gender));//等价与 tdGender.innerHTML = gender;

            //将列值添加到行元素节点

            tr.appendChild(tdName);

            tr.appendChild(tdAge);

            tr.appendChild(tdGender);

            

            //返回生成的行标签

            return tr;

        };

        </script>

    </head>

    <body>

    </body>

</html>

利用javascript动态向网页中添加表格的更多相关文章

  1. js动态向页面中添加表格

    我们在实际开发中经常会想要实现如下情况: 点击某个按钮,然后动态的网页面里面添加一个表格或者一行,这个更加灵活方便.但是实现起来肯定不能像在页面里面直接写标签来的容易,以下是我项目中的代码,拿过来分享 ...

  2. 利用 JavaScript SDK 部署网页版“Facebook 登录”

    facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...

  3. C# 在Word中添加表格的方法

    表格是组织整理数据的一种重要手段,应在生活中的方方面面.在Word文档中将繁杂的文字表述内容表格化,能快速.直接地获取关键内容信息.那么,通过C#,我们也可以在Word文档中添加表格,这里将介绍两种不 ...

  4. 如何在网页中添加 jQuery。

    转自:http://www.runoob.com/jquery/jquery-install.html 网页中添加 jQuery 可以通过多种方法在网页中添加 jQuery. 您可以使用以下方法: 从 ...

  5. spring：如何用代码动态向容器中添加或移除Bean ？

    先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...

  6. Java 在PDF中添加表格

    本文将介绍通过Java编程在PDF文档中添加表格的方法.添加表格时,可设置表格边框.单元格对齐方式.单元格背景色.单元格合并.插入图片.设置行高.列宽.字体.字号等. 使用工具:Free Spire. ...

  7. 在纯HTML的静态网页中添加一段统计网页访问量的JAVA Script代码？

    如何在网站上进行流量统计呢,可以找第三方服务网站去注册,但也可以在网站上直接添加代码,只需将以下代码copy到你的网页中,复制到</body>之前就可以啦!是不是很简单啊! <scr ...

  8. 重拾javascript动态客户端网页脚本

    笔记一: 一.DOM 作用: ·              DOM(Doument Object Model) 1.document文档 HTML 文件 (标记语言) <html> < ...

  9. 如何在网页中添加“QQ交流”

    今天在撸码时,想到这个问题,有些网页中会有诸如,那么如何在网页添加"QQ交谈"? 第一步.登录QQ: 第二步.打开网页:QQ推广,启用QQ通讯组件: 第三步.选择组件样式,设置提示 ...

随机推荐

  1. zookeeper客户端 和服务器连接时版本问题

    在使用kafka 和zookeeper 实现实时分析程序时,由于zookeeper部署版本和分析程序导入jar包的版本不一致,导致了当实时分析程序从远程服务器连接kafka集群的zookeeper时报 ...

  2. 奇怪！post提交 地址栏参数竟然可见

    转:    http://blog.csdn.net/yuebinghaoyuan/article/details/7727802 在做项目中,form标签中method="post&quo ...

  3. Solidworks如何圆周阵列

    如图所示,我要把一个圆孔分布八个,切记要选择边线,选择等间距,然后输入8,则自动会变成360度.   最后效果如图所示

  4. NYOJ92 图像实用区域 【BFS】

    碰到了一个曾经从未见过的奇怪问题:先上截图: 执行号 用户 题目 结果 时间 内存 语言 提交时间 895360 userid=%E9%95%BF%E6%9C%A8" style=" ...

  5. eletron 播放rtmp flash 播放器问题

    1 安装 flash https://www.flash.cn/ 2 man.js 配置 参考 https://newsn.net/say/electron-flash-win.html 3 播放器 ...

  6. HTTP学习笔记（一）报文和连接管理

    对TCP/IP协议簇有些了解的同学们应该都知道.TCP/IP协议通过精简ISO网络7层协议(事实上了解历史渊源的话,TCP/IP协议本来目的并非简化ISO的7层协议.仅仅是因为ISO协议簇制定速度慢于 ...

  7. 分析cocos2d-x的lua项目中的工具方法

    在创建完cocos2d-x的lua项目后.打开项目的Resources中的extern.lua文件.里面有两个用于面向对象的方法.一个是用于克隆,一个是用于继承. 代码分析例如以下 --克隆一个对象 ...

  8. servlet实现文件下载所需步骤及说明

      servlet实现文件下载所需步骤及说明 CreateTime--2017年9月1日15:46:22 Author:Marydon 参考链接:http://blog.sina.com.cn/s/b ...

  9. jQuery Mobile开发的新闻阅读器,适应iphone和android手机

    程序猿都非常赖.你懂的! 我们常常上新浪,腾讯.雅虎等各大站点上面看新闻.他们也都各自推出了自家的手机新闻阅读器.今天我自己使用jQuery Mobile 来实现这一功能.图片大小上传限制了大小250 ...

  10. java nio读取和写入文件

    读取 package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputS ...