效果图如下：

以下是代码：

<!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. 对国外某hotel的内网域简单渗透

    Penetration Testing不单单是一个博客,更热衷于技术分享的平台. 本文将讲述对国外某一hotel的渗透测试,让更多的人安全意识得到提高,有攻才有防,防得在好,也有疏忽的地方,这就是为啥 ...

  2. 【Excle数据透视】如何用含有单元格的数据来创建数据透视

    取消合并单元格,填充相同内容项,然后创建数据透视表. 如下图:需要使用数据创建数据透视表 步骤一 开始→格式刷,然后对单元格区域G2:G15使用格式刷功能,保留合并单元格格式 步骤二 选中A2:A18 ...

  3. 登陆界面综合实例+spinner下拉列表框详解

      点击确定: 点击修改:     想到Spinner下拉按钮可以通过两种方法生成 方法一: 1.在array数组里面定义数组 代码如下: <resources> <st <? ...

  4. Freebsd的ports命令

    安装 make clean 卸载 make deinstall 重装 make reinstall 清理 make clean 列出配置单 make config 恢复默认的配置单 make rmco ...

  5. Objective-C 执行AppleScript脚本

    在Objective-C里事实上也能够执行AppleScript 第一种方式是Source 将脚本写到变量字符串里 NSAppleEventDescriptor *eventDescriptor = ...

  6. phpQuery—基于jQuery的PHP实现（转）

    Query的选择器之强大是有目共睹的,phpQuery 让php也拥有了这样的能力,它就相当于服务端的jQuery. 先来看看官方简介: phpQuery is a server-side, chai ...

  7. Linux系统rootpassword改动

    重新启动系统. 进入系统引导界面: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzMzOTg1MQ==/font/5a6L5L2T/fontsi ...

  8. HTML5 2D平台游戏开发#1

    在Web领域通常会用到一组sprite来展示动画,这类动画从开始到结束往往不会有用户参与,即用户很少会用控制器(例如鼠标.键盘.手柄.操作杆等输入设备)进行操作.但在游戏领域,sprite动画与控制器 ...

  9. chessy 提高篇系列 阅读笔记

    java提高篇(一)—–理解java的三大特性之封装 封装的好处, 汇聚属性和方法 减少修改对 其他处的影响 控制get和set方法. java提高篇(二)—–理解java的三大特性之继承 继承的好处 ...

  10. .net调用存储过程详解（转载）

    本文的数据库用的是sql server 连接字符串 string conn = ConfigurationManager.ConnectionStrings["NorthwindConnec ...