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. Add生成されたテーブル行をテーブル本体に追加します。
8. 行ごとに「奇数」クラスと「偶数」クラスを切り替えて、視覚的に区別します。
9. 最後に、テーブル本体をターゲット HTML テーブルに追加します。 $("#target_table_id tbody").html(tbl_body).

特定のフィールドの除外

から特定のフィールドを簡単に除外できます。各フィールド キーが、期待されるキーを含むオブジェクト内に存在するかどうかを確認することによって生成されたテーブル。キーが存在し、 false に設定されている場合は、対応するフィールドをテーブルから除外します。

コード例

$.getJSON(url , function(data) {
    var tbl_body = "";
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += ""+v+"";
        });
        tbl_body += ""+tbl_row+"";
        odd_even = !odd_even;               
    });
    $("#target_table_id tbody").html(tbl_body);
});
このコード サンプルは、JSON 配列データを次のように変換します。可読性を高めるために「奇数」行クラスと「偶数」行クラスを交互に持つテーブル。特定の要件を満たすために自由に変更したりカスタマイズしたりできます。

以上がjQuery を使用して JSON 配列を HTML テーブルに効率的に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。