ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery を使用して JSON 配列を HTML テーブルに変換する方法 (特定のフィールドを除外する機能も含む)

jQuery を使用して JSON 配列を HTML テーブルに変換する方法 (特定のフィールドを除外する機能も含む)

Barbara Streisand
リリース: 2024-10-30 04:53:02
オリジナル
543 人が閲覧しました

How to Convert JSON Arrays into HTML Tables with jQuery, Including the Ability to Exclude Specific Fields?

jQuery を使用した JSON 配列から HTML テーブルへの変換

JSON オブジェクトの配列から HTML テーブルへの変換は、jQuery を使用して効率的に実行できます。

解決策:

提供された jQuery コード スニペットは、特定のフィールドを除いて、JSON オブジェクトの配列を HTML テーブルに変換します。

<pre class="brush:php;toolbar: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 += "<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);
});
ログイン後にコピー

除外するには特定のキーを使用するには、tbl_row = 行の前に次のロジックを追加します:

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };
if ( ( k in expected_keys ) &amp;&amp; expected_keys[k] ) {
...
}
ログイン後にコピー

または、より安全で DOM フレンドリーなアプローチを使用することもできます:

<pre class="brush:php;toolbar:false">
$.getJSON(url , function(data) {
    var tbl_body = document.createElement("tbody");
    var odd_even = false;
    $.each(data, function() {
        var tbl_row = tbl_body.insertRow();
        tbl_row.className = odd_even ? "odd" : "even";
        $.each(this, function(k , v) {
            var cell = tbl_row.insertCell();
            cell.appendChild(document.createTextNode(v.toString()));
        });        
        odd_even = !odd_even;               
    });
    $("#target_table_id").append(tbl_body);   //DOM table doesn't have .appendChild
});
ログイン後にコピー

これらのメソッドを使用すると、簡単にJSON 配列を HTML テーブルに変換し、不要なフィールドを柔軟に除外します。

以上がjQuery を使用して JSON 配列を HTML テーブルに変換する方法 (特定のフィールドを除外する機能も含む)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート