Maison > interface Web > js tutoriel > le corps du texte

Comment jQuery peut-il simplifier la conversion de données JSON en tableaux HTML ?

Linda Hamilton
Libérer: 2024-10-27 20:35:30
original
891 Les gens l'ont consulté

How Can jQuery Simplify Converting JSON Data into HTML Tables?

L'approche simplifiée de jQuery pour la conversion de tableaux JSON en HTML

La conversion de tableaux JSON en tableaux HTML peut être une tâche fastidieuse, mais jQuery simplifie le processus de façon spectaculaire.

Pour générer une table à partir d'un tableau JSON, utilisez la fonction getJSON() pour récupérer les données :

$.getJSON(url , function(data) {
Copier après la connexion

Ensuite, créez le corps de la table :

var tbl_body = "";
Copier après la connexion

Parcourez les lignes et les colonnes du tableau JSON pour créer les cellules du tableau :

$.each(data, function() {
    var tbl_row = "";
    $.each(this, function(k , v) {
        tbl_row += "<td>"+v+"</td>";
    });
Copier après la connexion

Excluez des champs spécifiques en ajoutant un objet pour vérifier si les clés doivent être omises :

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };
Copier après la connexion

Ajoutez la condition if pour vérifier les clés à exclure :

if ( ( k in expected_keys ) &amp;&amp; expected_keys[k] ) {
...
}
Copier après la connexion

Ajoutez le corps du tableau à l'élément HTML cible :

$("#target_table_id tbody").html(tbl_body);
Copier après la connexion

Alternativement, pour une sécurité améliorée, utilisez l'injection -version gratuite ci-dessous :

$.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);   
});
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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!