效果图如下：

以下是代码：

<!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. TensorFlow笔记二：线性回归预测(Linear Regression)

    代码: import tensorflow as tf import numpy as np import xlrd import matplotlib.pyplot as plt DATA_FILE ...

  2. 内网ip打洞-----p2p实现原理

    网上找了非常多.代码大堆,原理讲清楚透彻的不多. 本人找几篇讲得好的来整理一下. 一片技术文章,最基本的讲清楚原理.假设再有完整的能执行的源码也可,关键是要把核心部分代码分析清楚. (1)问题的由来: ...

  3. rsync的几则tips（渗透技巧）

    转自91ri 关于rsync rsync(remote synchronize)——Linux下实现远程同步功能的软件,能同步更新两处计算机的文件及目录.在同步文件时,可以保持源文件的权限.时间.软硬 ...

  4. .netMVC:Web页面向后台提交数据的方式和选择

    众所周知Web前端页面主要由HTML/CSS/Javascript组成,当要通过与用户的交互实现各种功能时,就需要向后台提交一些数据或者操作.在Web世界里各种实现眼花缭乱,但究其根本,不外乎三种方式 ...

  5. INSTALL_FAILED_UID_CHANGED解决的方法

    近期开发过程中又遇到了这个问题,最终找到了一个比較好的解决的方法.在此记录下. 打开手机或者pad中的设置----->安全----->未知来源(同意安装非安卓市场应用程序). 把这个取消, ...

  6. 详细解析用Squid实现反向代理的方法

    代理服务器是使 用非常普遍的一种将局域网主机联入互联网的一种方式,使用代理上网可以节约紧缺的IP地址资源,而且可以阻断外部主机对内部主机的访问,使内部网主机免受 外部网主机的攻击.但是,如果想让互联网 ...

  7. Mongodb之备份恢复脚本

    本分脚本: !/bin/bash #备份文件执行路径 which mongodump DUMP= #临时备份目录 OUT_DIR= #本分存放目录 TAR_DIR= #获取当前系统时间==> 2 ...

  8. Zabbix-20160817-高危SQL注入漏洞

    漏洞概述: zabbix是一个开源的企业级性能监控解决方案.近日,zabbix的jsrpc的profileIdx2参数存在insert方式的SQL注入漏洞,攻击者无需授权登陆即可登陆zabbix管理系 ...

  9. 8148之更换摄像头出现异常---REISZER OVERFLOW OCCURED: RESTARTING

    my iss config as: rsz_reg->SRC_VSZ  = 1079;//715;    rsz_reg->SRC_HSZ  = 1919;//1277; rszA_reg ...

  10. EF Core 日志跟踪sql语句

    EF Core 日志跟踪sql语句 官方文档链接:https://docs.microsoft.com/en-us/ef/core/miscellaneous/logging 1.新增自定义ILogg ...