Comment puis-je convertir efficacement des tableaux JSON en tableaux HTML à l'aide de jQuery ?-js tutoriel-php.cn

Comment puis-je convertir efficacement des tableaux JSON en tableaux HTML à l'aide de jQuery ?

Patricia Arquette

Libérer： 2024-10-30 05:15:03

original

954 Les gens l'ont consulté

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

Conversion sans effort de tableaux JSON en tableaux HTML à l'aide de jQuery

Face à la tâche de convertir un tableau d'objets JSON en tableau HTML, la complexité du processus peut être intimidant. Heureusement, jQuery simplifie considérablement ce processus.

Exploiter jQuery pour automatiser la création de tables

Le code jQuery fourni rationalise le processus de conversion en parcourant chaque objet JSON du tableau et en générant dynamiquement les lignes de table correspondantes. et cellules :

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

Copier après la connexion

Exclusion de champs spécifiques (facultatif)

Pour exclure des champs spécifiques du tableau, créez simplement un objet avec leurs noms comme clés et valeurs vrai/faux pour indiquer l'inclusion ou exclusion :

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

Copier après la connexion

Ensuite, enveloppez la ligne tbl_row = avec la vérification suivante :

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

Copier après la connexion

Alternative sans injection

Pour une approche plus isolée, considérez ceci Solution basée sur DOM :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!