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

//此段代码在IE9、火狐、Chorme、safair中测试显示没有问题，给该表格添加了一些简单的样式，基本功能可以实现，还有少量问题有待改进！效果图如下

以下是代码：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title JSON数组转成表格/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS '标题{ padd : 0 5px 0宽度： 450像素；font:斜体11px '投石机MS '，Helvetica阿丽亚娜维尔达纳，无衬线；文本对齐：右侧；} td { border:1px固态# c1dad 7 padd : 6px 6px 6px 12 pcolor : # 4f 6b 72文本对齐：中心；宽度width:150px}/style脚本类型=' text/JavaScript ' var data=[{ name : '小小，年龄：12,性别： '男性}，{name:'xiao '，年龄3:22,性别3: '男性}，{name:'hh '，年龄：12,性别： '女性}，{ name: ' ran '，年龄：20//网页加载完成后执行该装载事件onload=function(){ var body=document。getelementsbytagname(' body ')[0]；尸体。appendchild(创建表(数据))；};//根据传入的json数组创建表格var createTable=函数（数据){ //定义表格var表=文档。创建元素(“表”)；table.setAttribute('style '，' width : 450 px ')；//定义表格标题var caption=文档。创建元素(“标题”)；' caption.innerHTML='学生信息表；//将标题添加进表格table.appendChild(标题);//调用createTr()方法生成标题行并将其添加到桌子中table.appendChild(createTr('姓名','年龄','性别'));table.childNodes[1]。setAttribute('style '，' background : # cae8ea ')；//alert(表。第一个孩子)；//用于循环json对象，然后将循环到的对象通过createTr()方法生成行，添加到桌子中for(var I=0；idata . LengTii){ table。appendchild(Createtr(数据[I]).姓名、数据[i].年龄、数据[i].性别);}返回表格；};//根据用户传过来的变量生成表格中行的方法var createTr=函数（姓名、年龄、性别){ //定义行元素标签var tr=文档。创建元素(' tr ')；//定义列元素标签var TDname=文档。create element(' TD ')；//设置该列节点的文本节点的值tdname . innerHTMl=namevar TDage=document。create element(' TD ')；tdAge.innerHTML=agevar性别=文档。create element(' TD ')；t性别。appendchild(文档。createtextnode(性别))；//等价与tdGender.innerHTML=gender//将列值添加到行元素节点tr。append child(TDNAmE)；tr。append child(TDage)；tr。append child(TD性别)；//返回生成的行标签返回tr；};/脚本/标题正文/正文/html