从json对象中读取数据存入表格

2018-5-15 16:28| 发布者: admin| 查看: 1204| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了从json中读取数据,然后存入table表格中。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload = function () {
  var oTab = document.getElementById('antzone');
  var data = [
    { id: 1, username: '小王', sex: '男' },
    { id: 2, username: '小李', sex: '女' },
    { id: 3, username: '小红', sex: '男' },
    { id: 4, username: '小强', sex: '男' },
  ];
 
  var oTbody = oTab.tBodies[0];
  for (var index = 0; index < data.length; index++) {
    var oTr = document.createElement('tr');
    oTbody.appendChild(oTr);
 
    var oTd = document.createElement('td');
    oTd.innerHTML = data[index].id;
    oTr.appendChild(oTd);
 
    oTd = document.createElement('td');
    oTd.innerHTML = data[index].username;
    oTr.appendChild(oTd);
 
    oTd = document.createElement('td');
    oTd.innerHTML = data[index].sex;
    oTr.appendChild(oTd);
 
    oTd = document.createElement('td');
    oTr.appendChild(oTd);
 
    var oA = document.createElement('a');
    oA.innerHTML = "删除";
    oA.href = "javascript:;";
    oTd.appendChild(oA);
    oA.onclick = function () {
      oTbody.removeChild(this.parentNode.parentNode);
    }
  }
}
</script>
</head>
<body>
<table id="antzone" border="1" width="100%">
  <thead>
    <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>性别</td>
      <td>操作</td>
    </tr>
  </thead>
  <tbody></tbody>
</table>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。

(2).var oTab = document.getElementById('antzone'),获取table元素对象。

(3).var data = [

  { id: 1, username: '小王', sex: '男' },

  { id: 2, username: '小李', sex: '女' },

  { id: 3, username: '小红', sex: '男' },

  { id: 4, username: '小强', sex: '男' },

],我们要使用的json格式对象。

(4).var oTbody = oTab.tBodies[0],获取第一个tbody元素对象。

(5).for (var index = 0; index < data.length; index++) {},遍历json格式对象中的每一个元素。

(6).var oTr = document.createElement('tr'),创建一个tr元素对象。

(7).oTbody.appendChild(oTr),在tbody中添加创建的tr元素对象。

(8).var oTd = document.createElement('td'),创建一个td元素对象。

(9).oTd.innerHTML = data[index].id,为单元中设置值,这里的值就是数组中对象元素的id属性值。

二.相关阅读:

(1).document.createElement()可以参阅document.createElement()方法一章节。

(2).appendChild()可以参阅appendChild()用法详解一章节。

(3).innerHTML可以参阅innerHTML属性的用法一章节。

(4).parentNode可以参阅parentNode属性用法简单介绍一章节。

(5).removeChild()可以参阅js removeChild()函数简单介绍一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部