效果图如下：

以下是代码：

<!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. PHP中读取文件的几个方法

    整理了一下PHP中读取文件的几个方法,方便以后查阅. 1.fread string fread ( int $handle , int $length ) fread() 从 handle 指向的文件 ...

  2. MFC的运行机理分析+ASC码问题

    Win32程序是从WinMain开始执行的,但是MFC把WinMain给封装了,不会出现在你的代码里面,他已经编译到mfc80.dll了(VS2005)了. 在MFC中的执行顺序是这样的,首先Wind ...

  3. 分享一套C++入门基础视频

    本课程从C++起步.用户无需不论什么计算机基础,仅仅须要懂的主要的电脑操作,既可学习本课程.本课程适合在校大学生,在职人员等,通过本课程的学习,学员可掌握C++\MFC\VC++server端.网络编 ...

  4. [读书笔记] learn python the hard way书中 有关powershell 的一些小问题

    ex46中,创建自己的python,  当你激活环境时 .\.venvs\lpthw\ Scripts\activate 会报一个错误 此时需要以管理员身份运行PowerShell,(当前的PS不用关 ...

  5. eclipse不能添加tomcat

    有时候原来能新建server,删掉后就不能新建了 1.退出eclipse 2.到[工程目录下 workspace ]/.metadata/.plugins/org.eclipse.core.runti ...

  6. 根据URL发起HTTP请求，我的HTTPHelper。

     完整的demo using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  7. A、B两伙马贼意外地在一片沙漠中发现了一处金矿，双方都想独占金矿，但各自的实力都不足以吞下对方，经过谈判后，双方同意用一个公平的方式来处理这片金矿。处理的规则如下：他们把整个金矿分成n段，由A、B开始轮流从最左端或最右端占据一段，直到分完为止。 马贼A想提前知道他们能分到多少金子，因此请你帮忙计算他们最后各自拥有多少金子?（两伙马贼均会采取对己方有利的策略）

    第一种做法:这种方法,算法复杂性大,重复的递归 #include "stdafx.h" #include<iostream> #include<vector> ...

  8. uboot之bootm以及go命令的实现

    本文档简单介绍了uboot中用于引导内核的命令bootm的实现,同时分析了uImage文件的格式,还简单看了一下uboot下go命令的实现 作者: 彭东林 邮箱: pengdonglin137@163 ...

  9. php信号处理

    pcntl pcntl_signal 信号注册函数 pcntl_alarm 指定秒数中断程序执行任务. 每次执行只会有一个定时器生效,若之前计时器还没结束就定义新定时器,会替代之前定时器并返回之前定时 ...

  10. C#与Java在修饰符上的不同

    1.readonly 修饰符仅用于修饰类的数据成员.正如其名字说的,一旦它们已经进行了写操作.直接初始化或在构造函数中对其进行了赋值,数据成员就只能对其进行读取. readonly 和 const 数 ...