如何使用 jQuery 有效率地將 JSON 陣列轉換為 HTML 表？

使用jQuery 從JSON 陣列建立HTML 表格

您是否想知道在jQuery 中將JSON 物件陣列轉換為HTML 表格的有效方法？別再猶豫了！

jQuery 提供了一個方便的解決方案來自動執行此任務，如果需要，可以排除特定欄位。

將 JSON 轉換為 HTML 表的步驟

1. 從包含要顯示的資料的 JSON 陣列開始。
2. 使用 $.getJSON() 方法從 URL 或 JavaScript 物件擷取 JSON 資料。
3. 在回呼函數內部，建立一個變數來保存產生的表主體（tbl_body）。
4. 迭代數組中的每個 JSON 物件。
5. 對於每個對象，產生一個表格行（tbl_row ）並遍歷其欄位。
6. 在內循環內，為每個欄位附加 HTML 儲存格 ()，排除表格中不需要的任何內容。
7. 新增將產生的表格行新增至表格主體。
8. 為每行切換「奇數」或「偶數」類以提供視覺區分。
9. 最後，將表格主體附加到目標HTML 表格使用$("#target_table_id tbody").html(tbl_body).

排除特定欄位

排除特定欄位

您可以輕鬆排除某些欄位透過檢查每個欄位鍵是否存在於包含預期鍵的物件中來產生表格。如果該鍵存在且設定為 false，則從表中排除對應欄位。

<code class="javascript">$.getJSON(url , function(data) {
    var tbl_body = "";
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += "<td>"+v+"</td>";
        });
        tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
        odd_even = !odd_even;               
    });
    $("#target_table_id tbody").html(tbl_body);
});</code>

範例程式碼

此程式碼範例將JSON 陣列資料轉換為一個表，具有交替的「奇數」和「偶數」行類以提高可讀性。請隨意修改和自訂它以滿足您的特定要求。

以上是如何使用 jQuery 有效率地將 JSON 陣列轉換為 HTML 表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！