javascript动态向网页中添加表格实现代码


Posted in Javascript onFebruary 19, 2014

//此段代码在IE9、Firefox、Chorme、safair中测试显示没有问题,给该表格添加了一些简单的样式,基本功能可以实现,还有少量问题有待改进!

效果图如下:
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 相关文章推荐
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
微信小程序block的使用教程
Apr 01 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
javascript实现动态侧边栏代码
Feb 19 #Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 #Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 #Javascript
document.forms[].submit()使用介绍
Feb 19 #Javascript
页面按钮禁用与解除禁用的方法
Feb 19 #Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 #Javascript
悬浮数字的实现案例
Feb 19 #Javascript
You might like
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python打印斐波拉契数列实例
2015/07/07 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
Solaris操作系统的线程机制
2012/12/23 面试题
医科大学生的自我评价
2013/12/04 职场文书
售后主管岗位职责
2013/12/08 职场文书
管道维修工岗位职责
2013/12/27 职场文书
旅游安全协议书
2014/04/21 职场文书
应急处置方案
2014/06/16 职场文书
交通事故协议书范本
2014/11/18 职场文书
2014年妇联工作总结
2014/11/21 职场文书
产品质量保证书范本
2015/02/27 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书