效果图如下：

以下是代码：

<!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树生成迷宫及A*自己主动寻路算法

    PHP树生成迷宫及A*自己主动寻路算法 迷宫算法是採用树的深度遍历原理.这样生成的迷宫相当的细,并且死胡同数量相对较少! 随意两点之间都存在唯一的一条通路. 至于A*寻路算法是最大众化的一全自己主动寻 ...

  2. NSIS隐藏窗体标题栏自带的button（最大化，最小化，关闭X)

    这个问题实在八月份逛csdn论坛的时候偶然遇到的,当时比較好奇楼主为啥要隐藏关闭button.就顺口问了下,结果楼主已经弃楼.未给出原因,猜着可能是为了做自己定义页面美化,无法改变按纽外观之类的,后来 ...

  3. vue2.0 仿手机新闻站（五）全局的 loading 组件

    1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...

  4. React学习之redux

    在阅读本文之前,希望大家对以下知识点能提前有所了解并且上好厕所(文章有点长): 状态提升的概念 react高阶组件(函数) es6基础 pure 组件(纯函数) Dumb 组件 React.js的co ...

  5. URL Handle in Swift (一) -- URL 分解

    更新时间: 2018-6-6 在程序开发过程之中, 我们总是希望模块化处理某一类相似的事情. 在 ezbuy 开发中, 我接触到了对于 URL 处理的优秀的代码, 学习.改进.记录下来.希望对你有所帮 ...

  6. A008-drawable资源

    关于drawable资源笔者之前有写过两篇文章: Android-自己定义图像资源的使用(1) Android-自己定义图像资源的使用(2) 这里笔者就不做过多的赘述.我们从实际开发的角度去理解这个知 ...

  7. oracle中视图v$sql的用途

    1.获取正在执行的sql语句.sql语句的执行时间.sql语句的等待事件: select a.sql_text,b.status,b.last_call_et,b.machine,b.event,b. ...

  8. C市现在要转移一批罪犯到D市，C市有n名罪犯，按照入狱时间有顺序，另外每个罪犯有一个罪行值，值越大罪越重。现在为了方便管理，市长决定转移入狱时间连续的c名犯人，同时要求转移犯人的罪行值之和不超过t，问有多少种选择的方式？

    // ConsoleApplication12.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" // ConsoleApplication1 ...

  9. 字符串转化成十六进制输出StrToHex（Delphi版、C#版）

    //注意:Delphi2010以下版本默认的字符编码是ANSI,VS2010的默认编码是UTF-8,delphi版字符串事先须经过AnsiToUtf8()转码才能跟C#版得到的十六进制字符串显示结果一 ...

  10. 【selenium+python】之Python Flask 开发环境搭建(Windows)

    一.先安装python以及pip 二.其次, Python的虚拟环境安装: 在github上下载https://github.com/pypa/virtualenv/tree/master  zip文 ...