從json物件中讀取資料存入表格

admin發表於2018-05-15
JSON物件
本章節分享一段程式碼例項，它實現了從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()函式簡單介紹一章節。

相關文章