在 Web 應用程序中,很多時候我們需要使用表格來展示數據。為了方便起見,我們可以使用 jQuery 來加載 JSON 數據并且自動創建表格。接下來,讓我們通過以下的代碼來學習如何通過 jQuery 讀取 JSON 并且創建表格。
$(document).ready(function () { // 讀取 JSON 數據 $.getJSON("data.json", function (data) { // 構造表格頭 var tableHeader = "<thead><tr>"; $.each(data[0], function (key, value) { tableHeader += "<th>" + key + "</th>"; }); tableHeader += "</tr></thead>"; // 構造表格體 var tableBody = "<tbody>"; $.each(data, function (index, value) { tableBody += "<tr>"; $.each(value, function (key, value) { tableBody += "<td>" + value + "</td>"; }) tableBody += "</tr>"; }); tableBody += "</tbody>"; // 將表格頭和表格體放在一起 var table = "<table>" + tableHeader + tableBody + "</table>"; // 將表格添加到 HTML 頁面中 $("#table-container").html(table); }); });
在上面的代碼中,首先通過$.getJSON()
方法讀取 JSON 數據,然后通過$.each()
循環遍歷每個對象并且構造出表格頭和表格體。最后將表格頭和表格體放在一起并且將整個表格添加到 HTML 頁面中。
以上就是如何通過 jQuery 讀取 JSON 并自動創建表格的方法。希望對你有所幫助。