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()一章节。