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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 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
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
js读取cookie方法总结
2014/10/31 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python制作朋友圈九宫格图片
2019/11/03 Python
python实现双色球随机选号
2020/01/01 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
SQL SERVER面试资料
2013/03/30 面试题
医学院学生的自我评价分享
2013/11/19 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
安全责任书模板
2014/07/22 职场文书
升职自荐信范文
2015/03/27 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Python实现Hash算法
2022/03/18 Python
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang