JS-JSON-獲取JSON物件中的資料展示到表格裡
阿新 • • 發佈：2021-08-09
JS-JSON-獲取JSON物件中的資料展示到表格裡
1.要求
點選按鈕，將學生資訊展示到表格裡，並顯示總記錄條數。
2.實現思路
- 建立JSON物件
- 先建立一個JSON物件data，有總人數total和學生資訊emps兩個屬性
- emps是一個JSON陣列，裡面存放著所有學生的資訊。
- 搭框架
- 將按鈕、表格等都先建立好
- 將JSON物件中的資料放入框架中
- 獲取按鈕物件，將click事件註冊上去
- 獲取JSON物件中的emps屬性，也就是儲存所有學生資訊的JSON陣列
- 定義一個變數，遍歷emps陣列，將所有記錄都以表格的格式拼接到這個變數裡
- 將變數的值賦給tbody的innerHTML屬性
- 將total的值放進顯示總記錄數的span標籤
3.實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>將JSON物件中的資料展示到表格裡</title> </head> <body> <script type="text/javascript"> //JSON物件，儲存著員工資料 var data = { "total":6, "emps":[ {"empno":"001","ename":"張三","sal":800.0}, {"empno":"002","ename":"李四","sal":1800.0}, {"empno":"003","ename":"王五","sal":2800.0}, {"empno":"004","ename":"王六","sal":3800.0}, {"empno":"005","ename":"王七","sal":4800.0}, {"empno":"006","ename":"王八","sal":5800.0} ] }; window.onload = function() { //獲取按鈕物件 var displayBtnElt = document.getElementById("displayBtn"); displayBtnElt.onclick = function() { //獲取JSON物件中的儲存著員工資料的emps屬性 var emps = data.emps; //通過for迴圈，將所有員工的資訊都拼接到一個字串裡 //定義一個變數，用於儲存拼接的字串 var htmlStr = ""; for(var i = 0;i < emps.length;i++) { //獲取一條員工資訊 var emp = emps[i]; /* <tr> <td>001</td> <td>張三</td> <td>800.0</td> </tr> */ htmlStr += "<tr>"; htmlStr += "<td>" + emp.empno + "</td>"; htmlStr += "<td>" + emp.ename + "</td>"; htmlStr += "<td>" + emp.sal + "</td>"; htmlStr += "</tr>"; } //將拼接的字串放進tbody裡 document.getElementById("tBody").innerHTML = htmlStr; //將總人數放進末尾的span標籤內 document.getElementById("count").innerText = data.total; } } </script> <table border="1" width="50%" cellspacing="0" cellpadding="0"> <input type="button" value="點選顯示資料" id="displayBtn"> <h3>員工資訊表</h3> <hr> <thead> <tr> <th>員工編號</th> <th>員工姓名</th> <th>員工薪資</th> </tr> </thead> <tbody id="tBody" align="center"></tbody> </table> 總記錄條數：<span id="count">0</span> </body> </html>