javascript动态创建table表格并添加数据代码
本章节分享一段代码实例,它实现了动态创建table表格的功能。
需要的朋友可以做一下参考,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> function AppendData() { var data={ "前端教程网":"http://www.pipipi.net", "特效代码":"http://www.51texiao.cn", "腾讯":"http://www.qq.com" }; var table=document.getElementById("tblMain"); for (var key in data){ var value=data[key]; var tr=table.insertRow(-1); var td1=tr.insertCell(-1); td1.innerText=key; var td2=tr.insertCell(-1); td2.innerHTML="<a href='" + value + "'>" + value + "</a>"; } } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ AppendData(); } } </script> </head> <body> <table border="1" id="tblMain"></table> <input type="button" id="bt" value="查看效果"/> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function AppendData(){},此函数实现了核心功能。(2).var data={
"前端教程网":"http://www.pipipi.net",
"特效代码":"http://www.51texiao.cn",
"腾讯":"http://www.qq.com"
},创建一个json格式数据,属性和属性值分别作为一行的内容。
(3).var table=document.getElementById("tblMain"),获取table表格元素对象。
(4).for (var key in data){},使用for in语句遍历对象中的每一个属性。
(5).var value=data[key],获取属性值。
(6).var tr=table.insertRow(-1),在表格中插入一行,返回值tr是一个tr元素对象。
(7).var td1=tr.insertCell(-1),在行中插入一个单元格,返回值td1是一个td元素对象。
(8).td1.innerText=key,设置单元格的文本内容。
(9).var td2=tr.insertCell(-1),和上面同样的道理,添加一个单元格。
(10).td2.innerHTML="<a href='" + value + "'>" + value + "</a>",设置单元格的html内容。
二.相关阅读:
(1).for in语句可以参阅javascript for in一章节。
(2).insertRow()方法可以参阅js insertRow()一章节。
(3).insertCell()方法可以参阅js insertCell()一章节。