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

回复

我来回复
  • 暂无回复内容