Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich JSON-Arrays mit jQuery effizient in HTML-Tabellen konvertieren?

Wie kann ich JSON-Arrays mit jQuery effizient in HTML-Tabellen konvertieren?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-30 05:15:03852Durchsuche

 How Can I Efficiently Convert JSON Arrays to HTML Tables Using jQuery?

Mühelose Konvertierung von JSON-Arrays in HTML-Tabellen mit jQuery

Wenn man vor der Aufgabe steht, ein Array von JSON-Objekten in eine HTML-Tabelle zu konvertieren, ist der Prozess sehr komplex kann entmutigend sein. Glücklicherweise vereinfacht jQuery diesen Prozess erheblich.

Nutzung von jQuery zur Automatisierung der Tabellenerstellung

Der bereitgestellte jQuery-Code rationalisiert den Konvertierungsprozess, indem er jedes JSON-Objekt im Array durchläuft und die entsprechenden Tabellenzeilen dynamisch generiert und Zellen:

<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>

Bestimmte Felder ausschließen (optional)

Um bestimmte Felder aus der Tabelle auszuschließen, erstellen Sie einfach ein Objekt mit ihren Namen als Schlüssel und Wahr/Falsch-Werten, um die Einbeziehung anzuzeigen oder Ausschluss:

<code class="javascript">var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };</code>

Dann umschließen Sie die Zeile tbl_row = mit der folgenden Prüfung:

<code class="javascript">if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}</code>

Injektionsfreie Alternative

Für einen isolierteren Ansatz sollten Sie dies in Betracht ziehen DOM-basierte Lösung:

<code class="javascript">$.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
});</code>

Das obige ist der detaillierte Inhalt vonWie kann ich JSON-Arrays mit jQuery effizient in HTML-Tabellen konvertieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn