利用javascript动态向网页中添加表格
效果图如下:
以下是代码:
<!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动态向网页中添加表格的更多相关文章
- js动态向页面中添加表格
我们在实际开发中经常会想要实现如下情况: 点击某个按钮,然后动态的网页面里面添加一个表格或者一行,这个更加灵活方便.但是实现起来肯定不能像在页面里面直接写标签来的容易,以下是我项目中的代码,拿过来分享 ...
- 利用 JavaScript SDK 部署网页版“Facebook 登录”
facebook开发者平台https://developers.facebook.com/ 利用 JavaScript SDK 部署网页版“Facebook 登录” 通过采用 Javascript 版 ...
- C# 在Word中添加表格的方法
表格是组织整理数据的一种重要手段,应在生活中的方方面面.在Word文档中将繁杂的文字表述内容表格化,能快速.直接地获取关键内容信息.那么,通过C#,我们也可以在Word文档中添加表格,这里将介绍两种不 ...
- 如何在网页中添加 jQuery。
转自:http://www.runoob.com/jquery/jquery-install.html 网页中添加 jQuery 可以通过多种方法在网页中添加 jQuery. 您可以使用以下方法: 从 ...
- spring:如何用代码动态向容器中添加或移除Bean ?
先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...
- Java 在PDF中添加表格
本文将介绍通过Java编程在PDF文档中添加表格的方法.添加表格时,可设置表格边框.单元格对齐方式.单元格背景色.单元格合并.插入图片.设置行高.列宽.字体.字号等. 使用工具:Free Spire. ...
- 在纯HTML的静态网页中添加一段统计网页访问量的JAVA Script代码?
如何在网站上进行流量统计呢,可以找第三方服务网站去注册,但也可以在网站上直接添加代码,只需将以下代码copy到你的网页中,复制到</body>之前就可以啦!是不是很简单啊! <scr ...
- 重拾javascript动态客户端网页脚本
笔记一: 一.DOM 作用: · DOM(Doument Object Model) 1.document文档 HTML 文件 (标记语言) <html> < ...
- 如何在网页中添加“QQ交流”
今天在撸码时,想到这个问题,有些网页中会有诸如,那么如何在网页添加"QQ交谈"? 第一步.登录QQ: 第二步.打开网页:QQ推广,启用QQ通讯组件: 第三步.选择组件样式,设置提示 ...
随机推荐
- 最短路算法之 Dijkstra算法
Dijkstra算法 Dijkstra算法是典型最短路算法,用于计算一个节点到其它全部节点的最短路径. 主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Dijkstra算法能得出最短路径的最 ...
- ZT:成熟是一种明亮而不刺眼的光辉
成熟是一种明亮而不刺眼的光辉, 一种圆润而不腻耳的音响, 一种不再需要对别人察言观色的, 一种终于停止向周围申诉求告的大气, 一种不理会哄闹的微笑, 一种洗刷了偏激的冷漠, 一种无需声张的厚实, 一种 ...
- Koa2 + Mongoose + Log4js 持久化日志
代码地址如下:http://www.demodashi.com/demo/12466.html 之前做的项目是采用 Express 框架进行搭建的,其中的日志管理采用了 winston + Post ...
- nfs部署和优化 -2
客户端: cat /etc/passwd 显示用户 weifeng 500 服务端: vim /etc/exports /mnt 192.168.1.105(rw,sync,all_squash, ...
- Controller跳转到外部链接
return new ModelAndView(new RedirectView("http://www.baidu.com")); 用了这个方法之后,方法的返回值也会变成mode ...
- Lua学习九----------Lua字符串
© 版权声明:本文为博主原创文章,转载请注明出处 1.Lua字符串 - ''单引号间的一串字符 - ""双引号之间的一串字符 - [[]]之间的一串字符 2.Lua转义字符 3.字 ...
- 还需要学习的十二种CSS选择器
在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X ...
- Android应用的电量消耗和优化的策略
对于Android移动应用的开发者来说,耗电量的控制一直是个老大难问题. 我们想要控制耗电量,必须要有工具或者方法比较准确的定位应用的耗电情况.下面,我们先来分析下如何计算android应 ...
- 去掉activity默认动画效果的方法
非常多手机都会自带一些Activity切换动画,项目中假设我们须要禁用掉系统Activity切换的动画.能够使用例如以下方法: 一.重写Activity的Them中的windowAnimationSt ...
- 度度熊有一张网格纸,但是纸上有一些点过的点,每个点都在网格点上,若把网格看成一个坐标轴平行于网格线的坐标系的话,每个点可以用一对整数x,y来表示。度度熊必须沿着网格线画一个正方形,使所有点在正方形的内部或者边界。然后把这个正方形剪下来。问剪掉正方形的最小面积是多少。
// ConsoleApplication10.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream& ...