」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > jQuery 如何簡化 JSON 資料到 HTML 表的轉換?

jQuery 如何簡化 JSON 資料到 HTML 表的轉換?

發佈於2024-11-09
瀏覽:229

How Can jQuery Simplify Converting JSON Data into HTML Tables?

jQuery 的JSON 到HTML 表格轉換的簡化方法

將JSON 陣列轉換為HTML 表格可能是一項繁瑣的任務,但jQuery 簡化了這個過程

要從JSON 陣列產生表,請使用getJSON() 函數檢索資料:

$.getJSON(url , function(data) {

接下來,建立表格主體:

var tbl_body = "";

迭代JSON 數組行和列以建立表格單元格:

$.each(data, function() {
    var tbl_row = "";
    $.each(this, function(k , v) {
        tbl_row  = "<td>" v "</td>";
    });

透過新增物件來檢查要省略的鍵來排除特定欄位:

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };

新增if 條件來檢查要排除的鍵:

if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}

將表格正文附加到目標HTML 元素:

$("#target_table_id tbody").html(tbl_body);

或者,為了提高安全性,請使用免注入版本如下:

$.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
    });            
    $("#target_table_id").append(tbl_body);   
});
最新教學 更多>
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-11-09
  • 何時應該使用 Tkinter 的 Entry Get 函數來有效檢索輸入?
    何時應該使用 Tkinter 的 Entry Get 函數來有效檢索輸入?
    Tkinter Entry 的Get 函數:深入探討其功能和用法在Tkinter 中,Entry 小部件通常用於收集用戶輸入以進一步收集使用者輸入然而,與Entry 關聯的get() 函數通常無法產生所需的結果,這可能會讓開發人員感到困惑。本文深入探討 get() 的概念,全面了解其執行與應用。 理...
    程式設計 發佈於2024-11-09
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-11-09
  • 如何克服 PHP 中日期表示的 2038 限制?
    如何克服 PHP 中日期表示的 2038 限制?
    PHP 中的日期表示:克服2038 年限制雖然PHP 的原生日期函數在2038 年有一個截止日期,但還有其他方法處理超出此限制的日期。其中一種方法是僅儲存年、月和日,而忽略小時、分鐘、秒和毫秒部分。 透過丟棄這些附加時間部分,可以顯著擴展可表示日期的範圍。這是因為這些元件中的每一個都佔用了 PHP ...
    程式設計 發佈於2024-11-09
  • 如何在 Go (Gorilla) 中向特定客戶端發送有針對性的 Websocket 更新?
    如何在 Go (Gorilla) 中向特定客戶端發送有針對性的 Websocket 更新?
    在Go (Gorilla) 中向特定客戶端發送Websocket 更新儘管是Go 新手,但您尋求有關實現Websocket 通信的指導您的預輸入項目。您已嘗試利用 Gorilla 的 GitHub 儲存庫中的範例,但在理解如何識別特定客戶端並針對 websocket 更新進行定位方面遇到了挑戰。 要...
    程式設計 發佈於2024-11-09
  • 使用swoole作為基於ESP6的腳本可程式控制器的雲端物聯網閘道框架
    使用swoole作為基於ESP6的腳本可程式控制器的雲端物聯網閘道框架
    腳本可程式控制器的本機功能基本上已完成,開始實現遠端相關功能。 遠端系統整體架構如下: 使用ESP8266的SDK實作tcp伺服器和tcp客戶端。 在tcp伺服器的基礎上編寫http協議解析程式碼,設計簡單的http伺服器,處理與瀏覽器的資料交互,包括內建網頁的下載,並使用ajax技術獲取狀態並...
    程式設計 發佈於2024-11-09
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-11-09
  • 為什麼在 Java 的 Random 類別中設定種子會傳回相同的數字?
    為什麼在 Java 的 Random 類別中設定種子會傳回相同的數字?
    Java隨機數產生:為什麼設定種子會回傳相同的數字? 儘管將Random類別的種子設定為特定值,但隨機數產生器始終會傳回相同的數字。讓我們探討一下可能導致此問題的原因。 了解 Random 類別和種子初始化Java Random 類別旨在產生偽隨機數。預設情況下,它使用其內部時鐘作為種子值,使其產生...
    程式設計 發佈於2024-11-09
  • 如何克服使用反射設定結構體欄位值時 SetCan() 總是傳回 False 的問題?
    如何克服使用反射設定結構體欄位值時 SetCan() 總是傳回 False 的問題?
    使用結構體的 SetString 探索反射反射提供了動態操作 Go 結構的強大工具。在此範例中,我們在嘗試使用反射來設定結構體欄位的值時遇到一個常見問題:CanSet() 始終傳回 false。這種障礙阻止了字段修改,使我們陷入困境。 識別陷阱提供的程式碼片段突顯了兩個基本錯誤:傳遞值而非指標: ...
    程式設計 發佈於2024-11-09
  • 為什麼 MySQL 中帶有子查詢的「IN」查詢很慢,如何提升效能?
    為什麼 MySQL 中帶有子查詢的「IN」查詢很慢,如何提升效能?
    MySQL 中帶有子查詢的緩慢「IN」查詢當使用子查詢時,使用「IN」運算子的MySQL查詢可能會表現出顯著的效能下降檢索「IN」子句的值很複雜。在這種情況下,用明確值取代子查詢結果會顯著縮短執行時間。 要了解此行為的原因,需要注意的是,每次評估「IN」查詢時,MySQL 都會執行子查詢。在提供的範...
    程式設計 發佈於2024-11-09
  • 如何使用WinAPI取得螢幕解析度?
    如何使用WinAPI取得螢幕解析度?
    使用 WinAPI 取得螢幕解析度在 WinAPI 中,存在多個函數來決定目前螢幕解析度。適當的選擇取決於具體要求。 檢索顯示尺寸檢索顯示尺寸檢索顯示尺寸 主監視器:使用GetSystemMetrics(SM_CXSCREEN) 和GetSystemMetrics( SM_CYCYSEN) 取得主顯...
    程式設計 發佈於2024-11-09
  • 如何修復透過 Gmail REST API 發送電子郵件時出現的「400 錯誤請求 + 失敗前提條件」錯誤?
    如何修復透過 Gmail REST API 發送電子郵件時出現的「400 錯誤請求 + 失敗前提條件」錯誤?
    Gmail REST API:解決“400 Bad Request Failed Precondition”錯誤嘗試使用Gmail REST API 與伺服器發送電子郵件時-到伺服器授權時,您可能會遇到一條錯誤訊息,指出「400 Bad Request Failed Precondition」。此錯...
    程式設計 發佈於2024-11-09
  • 如何使用 LOAD XML 和 XML_LOAD() 將缺少 ID 列的 XML 檔案匯入 MySQL?
    如何使用 LOAD XML 和 XML_LOAD() 將缺少 ID 列的 XML 檔案匯入 MySQL?
    使用XML_LOAD() 函數將XML 檔案匯入MySQL在這種情況下,您在嘗試使用下列命令將XML 檔案匯入MySQL 資料庫表時遇到錯誤載入XML 指令。出現此問題的原因是表中的欄位數與 XML 檔案中的值不匹配,且表中多了一個自動遞增 id 欄位。 要解決此錯誤,您可以指定要使用 LOAD X...
    程式設計 發佈於2024-11-09
  • C++ 物件的記憶體是如何組織的?
    C++ 物件的記憶體是如何組織的?
    C 物件的記憶體佈局動態轉換和重新解釋操作通常涉及操作物件記憶體指標。讓我們深入研究 C 如何在記憶體中組織對象,以便更好地理解這些操作。 根據 C 標準,類別或結構中非靜態資料成員的記憶體佈局主要由它們的宣告順序決定。具有相同存取說明符的成員按其聲明的順序排序。 除了成員變數之外,物件還為以下物件...
    程式設計 發佈於2024-11-09
  • 時間數據系列:故事的其餘部分
    時間數據系列:故事的其餘部分
    Time Data Series: The Rest of the Story - AdatoSystems It’s been a while since I wrote about PHP Zmanim – the work I’ve done with it and the ...
    程式設計 發佈於2024-11-09

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3