PWA => GTM & gestion cookies ?

WRInaute accro
Bonjour

C'est pour ma PWA.

J'ai le min mini squelette de service-worker.js plus le minimum.

Il me reste à identifier les arborescences DOM des pages, les data structures associées, et à la fin de mettre le GTM et la gestion de cookies.

Comment gère-t-on GTM ( Google Tag Manager ), et la gestion des cookies, pour ce qui concerne les PWA ?

Merci beaucoup.

Amicalement.
 
WRInaute passionné
Si vous n'avez fait qu'ajouter un serviceworker, votre site fonctionne toujours pareil, donc je ne vois pas pourquoi il y aurait des changements à faire.
 
WRInaute accro
Bonjour rick38

En général, pour une PWA, vaut-il mieux faire une seule page tout javascript, ou plusieurs pages/urls avec des liens hyper-textes ?

Je refais la page d'accueil ( sur mon ordi ), je sais maintenant comment modifier le DOM en Javascript avec des scripts dans la page.

Les response sont fournis par le service worker, et les events fetch par les scripts.

Pour l'instant, ce sont des CacheOrFetchAndWriteCache dans le service worker, sauf le install ou j'alimente le cache avec les pages statiques.

Normalement çà roule.

Merci beaucoup de ton aide.

Amicalement.
 
WRInaute passionné
Donc vous n'avez pas seulement mis un serviceworker mais commencé à implémenter un système de cache qui permet de continuer d'accéder au site quand on n'est plus connecté à Internet.
Mais pas de changement à faire pour GTM et les cookies.

En général, pour une PWA, vaut-il mieux faire une seule page tout javascript, ou plusieurs pages/urls avec des liens hyper-textes ?

Une seule page (le template html, qu'on stocke en cache à l'install) où les liens (js) vont chercher en ajax les données (en json, ou html) à mettre là où il faut. Le but est la vitesse. On minimise au maximum les données à aller chercher.
Ca c'est l'idéal. Mais pénible quand on part d'un site déjà existant à devoir modifier...

Comme moi je pars de sites existants, je garde les 2, les liens hypertextes, auxquels j'ajoute une interception javascript pour ne charger en ajax que le contenu.
Comme ça j'ai un peu moins peur niveau crawling des moteurs de recherche en gardant l'ancien système, même si la découverte de pages ajax est sensée fonctionner en javascript (dit Google, mais quid des autres... ?).

Par contre, quand on fait un site uniquement javascript, il doit falloir vérifier que GTM comprenne bien quand on change de page. S'il détecte comme Google quand on fait un pushState() pour changer l'url, pas de problème, sinon il faut trouver comment le déclencher à chaque changement de page.
 
Dernière édition:
WRInaute accro
Bonjour rick38

Je suis en en train de construire la table des paris gagnés d'hier.

J'ai les données, mais la table n'est pas visible.

Pour une table en Javascript, faut-il des insertRow() / insertCell(), ou des appendChild() ?

Merci beaucoup.

Amicalement.
 
WRInaute accro
Ok Spout

Donc appendChild en amont pour les éléments de table, et puis innerHTML ou appendChild() pour écrire la table ?

Merci.
 
WRInaute accro
Bonjour Spout

Voilà le souk :


JavaScript:
const SCRIPT_ACCUEIL_DERNIERS_GAGNES = '/tmp/scripts/paris_gagnes_json.php';
const TEXT_NODE = 'NODE';
/**
 * Fonction de construction
 * d'un groupe
 * d'éléments Javascript.
 **/
function add_elem(elements)
{
    //    console.log('elements = ' + elements);
    var array_elements        = Array();
    array_elements = JSON.parse(elements);
    var  ARRAY_ELEM            = Array();
    var  ARRAY_FIELD_TYPE        = Array();
    var  ARRAY_FIELD        = Array();
    var ARRAY_PROPERTY_TYPE    = Array();
    var ARRAY_PROPERTY        = Array();
    var i = null;
    var j = null;
    /**
    TYPE_ELEM    = 0;
    TMP_ELEM    = 1;
    TYPE_PROPERT    = 2;
    PROPERT        = 3;
    **/
    for(i = 0; i < array_elements[0].length; i++) {
        switch(array_elements[0][i]) {
            case TEXT_NODE :
                ARRAY_ELEM[i] = document.createTextNode(array_elements[1][i]);
                break;
            case 'html' :
                ARRAY_ELEM[i] = document.createElement('html');
                break;
            case 'head' :
                ARRAY_ELEM[i] = document.createElement('head');
                break;
            case 'body' :
                ARRAY_ELEM[i] = document.createElement('body');
                break;
            case 'link' :
                ARRAY_ELEM[i] = document.createElement('link');
                break;
            case 'title' :
                ARRAY_ELEM[i] = document.createElement('title');
                break;
            case 'meta' :
                ARRAY_ELEM[i] = document.createElement('meta');
                break;
            case 'style' :
                ARRAY_ELEM[i] = document.createElement('style');
                break;
            case 'header' :
                ARRAY_ELEM[i] = document.createElement('header');
                break;
            case 'main' :
                ARRAY_ELEM[i] = document.createElement('main');
                break;
            case 'footer' :
                ARRAY_ELEM[i] = document.createElement('footer');
                break;
            case 'ul' :
                ARRAY_ELEM[i] = document.createElement('ul');
                break;
            case 'li' :
                ARRAY_ELEM[i] = document.createElement('li');
                break;
            case 'div' :
                ARRAY_ELEM[i] = document.createElement('div');
                break;
            case 'span' :
                ARRAY_ELEM[i] = document.createElement('span');
                break;
            case 'strong' :
                ARRAY_ELEM[i] = document.createElement('strong');
                break;
            case 'br' :
                ARRAY_ELEM[i] = document.createElement('br');
                break;
            case 'h1' :
                ARRAY_ELEM[i] = document.createElement('h1');
                break;
            case 'h2' :
                ARRAY_ELEM[i] = document.createElement('h2');
                break;
            case 'h3' :
                ARRAY_ELEM[i] = document.createElement('h3');
                break;
            case 'h4' :
                ARRAY_ELEM[i] = document.createElement('h4');
                break;
            case 'h5' :
                ARRAY_ELEM[i] = document.createElement('h5');
                break;
            case 'h6' :
                ARRAY_ELEM[i] = document.createElement('h6');
                break;
            case 'nav' :
                ARRAY_ELEM[i] = document.createElement('nav');
                break;
            case 'section' :
                ARRAY_ELEM[i] = document.createElement('section');
                break;
            case 'dl' :
                ARRAY_ELEM[i] = document.createElement('dl');
                break;
            case 'ol' :
                ARRAY_ELEM[i] = document.createElement('ol');
                break;
            case 'dt' :
                ARRAY_ELEM[i] = document.createElement('dt');
                break;
            case 'dd' :
                ARRAY_ELEM[i] = document.createElement('dd');
                break;
            case 'hr' :
                ARRAY_ELEM[i] = document.createElement('hr');
                break;
            case 'i' :
                ARRAY_ELEM[i] = document.createElement('i');
                break;
            case 'small' :
                ARRAY_ELEM[i] = document.createElement('small');
                break;
            case 'i' :
                ARRAY_ELEM[i] = document.createElement('i');
                break;
            case 'sub' :
                ARRAY_ELEM[i] = document.createElement('sub');
                break;
            case 'sup' :
                ARRAY_ELEM[i] = document.createElement('sup');
                break;
            case 'table' :
                ARRAY_ELEM[i] = document.createElement('table');
                break;
            case 'caption' :
                ARRAY_ELEM[i] = document.createElement('caption');
                break;
            case 'thead' :
                ARRAY_ELEM[i] = document.createElement('thead');
                break;
            case 'tbody' :
                ARRAY_ELEM[i] = document.createElement('tbody');
                break;
            case 'tr' :
                ARRAY_ELEM[i] = document.createElement('tr');
                break;
            case 'th' :
                ARRAY_ELEM[i] = document.createElement('th');
                break;
            case 'td' :
                ARRAY_ELEM[i] = document.createElement('td');
                break;
            case 'a' :
                ARRAY_ELEM[i] = document.createElement('a');
                break;
            case 'button' :
                ARRAY_ELEM[i] = document.createElement('button');
                break;
            case 'fieldset' :
                ARRAY_ELEM[i] = document.createElement('fieldset');
                break;
            case 'form' :
                ARRAY_ELEM[i] = document.createElement('form');
                break;
            case 'input' :
                ARRAY_ELEM[i] = document.createElement('input');
                break;
            case 'label' :
                ARRAY_ELEM[i] = document.createElement('label');
                break;
            case 'option' :
                ARRAY_ELEM[i] = document.createElement('option');
                break;
            case 'select' :
                ARRAY_ELEM[i] = document.createElement('select');
                break;
            case 'textarea' :
                ARRAY_ELEM[i] = document.createElement('textarea');
                break;
            case 'img' :
                ARRAY_ELEM[i] = document.createElement('textarea');
                break;
            case '' :
                ARRAY_ELEM[i] = null;
                break;
            default:
                console.log('Erreur : ' + ARRAY_FIELD_TYPE[i] + ' type inconnu.');
                break;
        }
    }
    /**
    TYPE_ELEM    = 0;
    TMP_ELEM    = 1;
    TYPE_PROPERT    = 2;
    PROPERT        = 3;
    **/
    for(i = 0; i < array_elements[2].length; i++) {
        elements_length = array_elements[2][i].length;
        if(elements_length <= 3) {
            for(j = 0; j < elements_length; j++) {
                //                console.log('ARRAY_PROPERTY_TYPE[ ' + i + ' ][ ' + j + ' ] = ' + array_elements[2][i][j]);
                switch(array_elements[2][i][j]) {
                    case 'colSpan' :
                        ARRAY_ELEM[i].colsPan = parseInt(array_elements[3][i][j]);
                        break;
                    case 'class' :
                        ARRAY_ELEM[i].className = array_elements[3][i][j];
                        break;
                    case 'id' :
                        ARRAY_ELEM[i].id = array_elements[3][i][j];
                        break;
                    case 'title' :
                        ARRAY_ELEM[i].title = array_elements[3][i][j];
                        break;
                    case 'href' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'accept' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'accept_charset' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'action' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'align' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'async' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'charset' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'checked' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'content' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'defer' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'disabled' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'enctype' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'formenctype' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'method' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'http-equiv' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'lang' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'itemprop' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'list' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'maxlength' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'minlength' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'name' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'readonly' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'rel' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'required' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'rows' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'rowspan' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'selected' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'src' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'target' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'type' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'value' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'wrap' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    default:
                        break;
                }
            }
        } else {
            //            console.log('ARRAY_PROPERTY_TYPE[ ' + i + ' ] = ' + array_elements[2][i]);
            switch(array_elements[2][i]) {
                case 'colSpan' :
                    ARRAY_ELEM[i].colsPan = parseInt(array_elements[3][i]);
                    break;
                case 'class' :
                    ARRAY_ELEM[i].className = array_elements[3][i];
                    break;
                case 'id' :
                    ARRAY_ELEM[i].id = array_elements[3][i];
                    break;
                case 'title' :
                    ARRAY_ELEM[i].title = array_elements[3][i];
                    break;
                case 'href' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'accept' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'accept_charset' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'action' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'align' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'async' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'charset' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'checked' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'content' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'defer' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'disabled' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'enctype' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'formenctype' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'method' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'http-equiv' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'lang' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'itemprop' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'list' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'maxlength' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'minlength' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'name' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'readonly' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'rel' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'required' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'rows' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'rowspan' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'selected' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'src' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'target' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'type' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'value' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'wrap' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                default:
                    break;
            }
        }
    }
    for(i = 0; i < ARRAY_ELEM.length -1; i++) {
        console.log('Element[ ' + i + ' ] = ' + ARRAY_ELEM[i]);
        ARRAY_ELEM[i].appendChild(ARRAY_ELEM[i + 1]);
    }
    console('Element[ ' + i + ' ] = ' + ARRAY_ELEM[i]);
    return ARRAY_ELEM[0];
}
function read_ligne(ligne) {
    var ArrayLine = Array();
    ArrayLine = JSON.parse(ligne);
    var cnt = 0;
    for(i in ArrayLine) {
        cnt++;
    }
    var field = null;        // champ.
    var field2 = null;        // champ.
    var ArrayTable = Array();    // résultat.
    var pos_hh = null;
    var pos_ff = null;
    var pos_cc = null;
    var pos_zz = null;
    var tmp_enreg;
    for(var i = 0; i < cnt; i++) {
        field = ArrayLine[i];
        ArrayTable[i] = Array();
        ArrayTable[i][0] = Array();
        ArrayTable[i][1] = Array();
        ArrayTable[i][2] = Array();
        ArrayTable[i][0][0] = '';    // CLASS TD
        ArrayTable[i][0][1] = '';    // CLASS HREF
        ArrayTable[i][1][0] = '';    // HREF VIRTUEL
        ArrayTable[i][1][1] = '';    // HREF
        ArrayTable[i][2][0] = '';    // FIELD VIRTUEL
        ArrayTable[i][2][1] = '';    // FIELD
        /**
        * HREF.
        **/
        pos_hh = field.indexOf('hh');
        pos_ff = field.indexOf('ff');
        /** CLASS.
        **/
        pos_cc = field.indexOf('cc');
        pos_zz = field.indexOf('zz');
        if((pos_hh !== -1)&&(pos_cc !== -1)) {
            if((pos_ff === -1)||(pos_zz === -1)) {
                console.log('Error ! field : ' + field + ' malformed !');
                return false;
            } else {
                /**
                * Il y a
                * deux classes.
                **/
                if(pos_cc < pos_ff) {
                    /**
                    * Pour le
                    * TD.
                    **/
                    /**
                    * Valeurs
                    * précalculées.
                    **/
                    ArrayTable[i][0][0] = field.substring(pos_cc + 2, pos_zz); // CLASS TD.
                    ArrayTable[i][1][0] = field.substring(pos_hh + 2, pos_ff); // HREF VIRTUEL
                    field2 = field.substring(pos_ff + 2);
                    pos_cc = field2.indexOf('cc');
                    pos_zz = field2.indexOf('zz');
                    /**
                    * Il y a
                    * deux classes.
                    **/
                    if((pos_cc !== -1)&&(pos_zz !== -1)) {
                        /**
                        * Pour le
                        * FIELD.
                        **/
                        ArrayTable[i][0][1] = field2.substring(pos_cc + 2, pos_zz); // CLASS FIELD
                        ArrayTable[i][1][1] = ArrayTable[i][1][0]; // HREF FIELD
                        ArrayTable[i][1][0] = '';    // HREF VIRTUEL.
                        ArrayTable[i][2][1] = html_to_text(field2.substring(pos_zz + 2));// FIELD
                        /**
                        * Erreur.
                        **/
                    } else {
                        alert('Erreur pour le champ : ' + field);
                        ArrayTable[i][0][1] = ArrayTable[i][0][0];    // CLASS FIELD
                        ArrayTable[i][0][0] = '';    // CLASS TD vide.
                        ArrayTable[i][1][1] = ArrayTable[i][1][0]; // HREF FIELD
                        ArrayTable[i][1][0] = '';    // HREF VIRTUEL vide.
                        ArrayTable[i][2][1] = html_to_text(field.substring(pos_ff + 2)); // FIELD
                    }
                    /**
                    * Il y a
                    * une seule
                    * classe,
                    * car le href
                    * est avant
                    * la classe
                    * du FIELD
                    **/
                } else {
                    ArrayTable[i][0][1] = field.substring(pos_cc + 2, pos_zz); // CLASS FIELD
                    ArrayTable[i][1][1] = field.substring(pos_hh + 2, pos_ff);  // HREF
                    ArrayTable[i][2][1] = html_to_text(field.substring(pos_zz + 2));// FIELD
                }
            }
            /**
            * Il n'y a pas
            * de HREF.
            **/
        } else if((pos_hh === -1)&&(pos_cc !== -1)) {
            ArrayTable[i][0][1] = field.substring(pos_cc + 2, pos_zz);    // CLASS FIELD
            ArrayTable[i][1][1] = '';                    // HREF
            ArrayTable[i][2][1] = html_to_text(field.substring(pos_zz + 2)); // FIELD
            /**
            * Il n'y a pas
            * de CLASS.
            **/
        } else if((pos_hh !== -1)&&(pos_cc === -1)) {
            ArrayTable[i][0][1] = ''; // CLASS FIELD vide.
            ArrayTable[i][1][1] = field.substring(pos_hh + 2, pos_ff);
            ArrayTable[i][2][1] = html_to_text(field.substring(pos_ff + 2));
            /**
            * Il n'y a
            * ni HREF
            * ni CLASS.
            **/
        } else {
            ArrayTable[i][0][1] = ''; // CLASS FIELD vide.
            ArrayTable[i][1][1] = ''; // HREF vide.
            ArrayTable[i][2][1] = html_to_text(field); // FIELD.
        }
    }
    //    alert('ArrayTable = ' + JSON.stringify(ArrayTable));
    return JSON.stringify(ArrayTable);
}
function displayData(json_data)
{
    var json_obj = Array();
    var json_obj = JSON.parse(json_data);
    var ligne = null;
    var ArrayAll = Array();
    var ArrayLigne = Array();
    var ClassField = Array;
    var HeaderClass = Array("lowcentercellext", "lowcentercellext", "lowcentercellext", "lowcentercellext");
    var HeaderText = Array("Paris Gagnés", "Courses", "Mises", "Gains");
    var tmp_count = null;
    var HeaderTr = null;
    var HeaderTd = null;
    var TextTd = null;
    var BodyTr = null;
    var BodyTd = null;
    var i = null;
    var j = null;
    var k = null;
    var id_paris_gagnes    = null;
    var TableParisGagnes    = document.createElement('table');
    var HeaderParisGagnes    = document.createElement('thead');
    var BodyParisGagnes    = document.createElement('tbody');
    var cnt = 0;
    for(i in json_obj) {
        cnt++;
    }
    if(cnt < 5) {
        return false;
    }
    /**
    TYPE_ELEM    = 0;
    TMP_ELEM    = 1;
    TYPE_PROPERT    = 2;
    PROPERT        = 3;
    **/
    k = -1;
    for(i = 0; i < cnt; i++) {
        ArrayLigne = Array();
        if((json_obj[i] != undefined)&&
            (json_obj[i][0] != undefined)&&
            (json_obj[i][0][0] != undefined)) {
            k++;
        } else {
            continue;
        }
        ligne = JSON.stringify(json_obj[i]);
//        console.log('ligne[ ' + k + ' ] = ' + ligne);
        if(k == 0) {
            HeaderTr = document.createElement('tr');
            /**
            * 3 X 3
            **/
            ArrayLigne = new Array(['th', TEXT_NODE],
                ['', 'Paris Gagnés du ' + ligne],
                [['colSpan', 'class'], ''],
                [['4', tmp_class("lowcentercellext")], '']);
            //            console.log('ArrayLine= ' + JSON.stringify(ArrayLigne));
            HeaderTd = add_elem(JSON.stringify(ArrayLigne));
            HeaderTr.appendChild(HeaderTd);
            HeaderParisGagnes.appendChild(HeaderTr);
        }
        else if(k == 1) {
            tmp_count = HeaderClass.length;
            HeaderTr = document.createElement('tr');
            for(j = 0; j < tmp_count; j++) {
                /**
                * 2 X 2
                **/
                ArrayLigne = new Array(['th', TEXT_NODE],
                    ['', HeaderText[j]],
                    ['class', ''],
                    [tmp_class(HeaderClass[j]), '']);
                //                console.log('ArrayLine= ' + JSON.stringify(ArrayLigne));
                HeaderTd = add_elem(JSON.stringify(ArrayLigne));
                HeaderTr.appendChild(HeaderTd);
            }
            HeaderParisGagnes.appendChild(HeaderTr);
            TableParisGagnes.appendChild(HeaderParisGagnes);
            ArrayAll = JSON.parse(read_ligne(ligne));
            var tmp_count = 0;
            for(j in ArrayAll) {
                tmp_count++;
            }
            BodyTr = document.createElement('tr');
            /**
            * On construit
            * d'abord le TD
            * puis le HREF
            * puis le FIELD.
            **/
            for(j = 0; j < tmp_count; j++) {
                ClassField = ArrayAll[j];
                /**
                * CLASS TD && HREF.
                **/
                if((ClassField[0][0] !== '')&&(ClassField[1][1] !== '')) {
                    /**
                    * 3 X 3
                    **/
                    ArrayLigne = new Array(['td', 'a', TEXT_NODE],
                        ['', '', ClassField[2][1]],
                        ['class', ['class', 'title', 'href'], ''],
                        [tmp_class(ClassField[0][0]), [tmp_class(ClassField[0][1]), ClassField[2][1], ClassField[1][1]], '']);
                    //                        console.log('ArrayLine= ' + JSON.stringify(ArrayLigne));
                    BodyTd = add_elem(JSON.stringify(ArrayLigne));
                    /**
                    * !CLASS && HREF.
                    **/
                } else if((ClassField[0][0] === '')&&(ClassField[1][1] !== '')) {
                    /**
                    * 3 X 3
                    **/
                    ArrayLigne = new Array(['td', 'a', TEXT_NODE],
                        ['', '', ClassField[2][1]],
                        ['', ['title', 'href'], ''],
                        ['', [ClassField[2][1], ClassField[1][1]],'']);
                    //                        console.log('ArrayLine= ' + JSON.stringify(ArrayLigne));
                    BodyTd = add_elem(JSON.stringify(ArrayLigne));
                    /**
                    * CLASS TD && !HREF.
                    **/
                } else if((ClassField[0][0] !== '')&&(ClassField[1][1] === '')) {
                    /**
                    * 2 X 2
                    **/
                    ArrayLigne = new Array(['td', TEXT_NODE],
                        ['', ClassField[2][1]],
                        ['class', ''],
                        [tmp_class(ClassField[0][1]), '']);
                    //                        console.log('ArrayLine= ' + JSON.stringify(ArrayLigne));
                    BodyTd = add_elem(JSON.stringify(ArrayLigne));
                    /**
                    * !CLASS TD && !HREF.
                    **/
                } else {
                    /**
                    * 2 X 2
                    **/
                    ArrayLigne = new Array(['td', TEXT_NODE],
                        ['', ClassField[2][1]],
                        ['', ''],
                        ['', '']);
                    //                        console.log('ArrayLine= ' + JSON.stringify(ArrayLigne));
                    BodyTd = add_elem(JSON.stringify(ArrayLigne));
                }
                BodyTr.appendChild(BodyTd);
            }
            BodyParisGagnes.appendChild(BodyTr);
        } else {
            ArrayAll = JSON.parse(read_ligne(ligne));
            var tmp_count = 0;
            for(j in ArrayAll) {
                tmp_count++;
            }
            BodyTr = document.createElement('tr');
            /**
            * On construit
            * d'abord le TD
            * puis le HREF
            * puis le FIELD.
            **/
            for(j = 0; j < tmp_count; j++) {
                ClassField = ArrayAll[j];
                /**
                * CLASS TD && HREF.
                **/
                if((ClassField[0][0] !== '')&&(ClassField[1][1] !== '')) {
                    /**
                    * 3 X 3
                    **/
                    ArrayLigne = new Array(['td', 'a', TEXT_NODE],
                        ['', '', ClassField[2][1]],
                        ['class', ['class', 'title', 'href'], ''],
                        [tmp_class(ClassField[0][0]), [tmp_class(ClassField[0][1]), ClassField[2][1], ClassField[1][1]], '']);
                    BodyTd = add_elem(JSON.stringify(ArrayLigne));
                    /**
                    * !CLASS && HREF.
                    **/
                } else if((ClassField[0][0] === '')&&(ClassField[1][1] !== '')) {
                    /**
                    * 3 X 3
                    **/
                    ArrayLigne = new Array(['td', 'a', TEXT_NODE],
                        ['', '', ClassField[2][1]],
                        ['', ['title', 'href'], ''],
                        ['', [ClassField[2][1], ClassField[1][1]],'']);
                    BodyTd = add_elem(JSON.stringify(ArrayLigne));
                    /**
                    * CLASS TD && !HREF.
                    **/
                } else if((ClassField[0][0] !== '')&&(ClassField[1][1] === '')) {
                    /**
                    * 2 X 2
                    **/
                    ArrayLigne = new Array(['td', TEXT_NODE],
                        ['', ClassField[2][1]],
                        ['class', ''],
                        [tmp_class(ClassField[0][1]), '']);
                    BodyTd = add_elem(JSON.stringify(ArrayLigne));
                    /**
                    * !CLASS TD && !HREF.
                    **/
                } else {
                    /**
                    * 2 X 2
                    **/
                    ArrayLigne = new Array(['td', TEXT_NODE],
                        ['', ClassField[2][1]],
                        ['', ''],
                        ['', '']);
                    BodyTd = add_elem(JSON.stringify(ArrayLigne));
                }
                BodyTr.appendChild(BodyTd);
            }
            BodyParisGagnes.appendChild(BodyTr);
        }
    }
    TableParisGagnes.appendChild(BodyParisGagnes);
    id_paris_gagnes    = document.getElementById("paris_gagnes");
    id_paris_gagnes.appendChild = TableParisGagnes;
    return true;
}
function getData() {
    var url = new URL('http://localhost/PWA' + SCRIPT_ACCUEIL_DERNIERS_GAGNES);
    fetch(url).then(function(response) {
        // parses JSON response into native JavaScript objects
        response.json().then(function(json_obj) {
            var json_data = JSON.stringify(json_obj);
            //        console.log('Réponse paris_gagnes_json.php =>  ' + json_data);
            displayData(json_data);
        }, function(err) {
            console.log(err + ' no data');
            return null;
        })
    }, function(err) {
        console.log(err + ' no response');
        return null;
    })
}
getData();


Je vous demande pardon pour la complexité du code.

Il ne faut pas tenir compte des attributs après "accept", il ne sont pas utilisés.

Les appels à add_elem(Array()), rendent théoriquement l'objet DOM du champ Array[0][0], englobant les autres paramètres.

Les valeurs texte sont en Array[1][...], les attributs en Array[2][...] et leurs valeurs en Array[3][..].

Pas d'erreur à l'exécution, mais la table ne s'affiche pas.

Que faire ?

Merci.

Amicalement.
 
Dernière édition:
WRInaute accro
Excusez-moi

Pour construire une table en Javascript, est-il obligatoire de passer par des insertRow() et insertCell() ?

Merci beaucoup.

Amicalement.
 
WRInaute accro
Bonjour

Je ne sais pas retourner un Element ( linéaire ) à partir d'une fonction.

J'ai fait la fonction ci-dessous :

Elle construit des Elements père/fils, sans Sibling.

Dans le paramètre elements, la suite est du type racine vers feuille.

L'assemblage ( avec des appendChild() ), se fait des feuilles vers la racine.

Celà me semble logique, mais si vous pouviez me dire s'il ne faut pas faire l'inverse ( racine vers feuille ) ?

Peut-on lire l'Element complet en appelant cette fonction ?

Moi je n'obtiens rien.

Merci beaucoup.

Amicalement.


JavaScript:
/**
 * Fonction de construction
 * d'un groupe
 * d'éléments Javascript.
 **/
function add_elem(elements)
{
    //    console.log('elements = ' + elements);
    var array_elements        = Array();
    array_elements = JSON.parse(elements);
    var  ARRAY_ELEM            = Array();
    var  ARRAY_FIELD_TYPE        = Array();
    var  ARRAY_FIELD        = Array();
    var ARRAY_PROPERTY_TYPE    = Array();
    var ARRAY_PROPERTY        = Array();
    var i = Number(0);
    var j = Number(0);
    var elements_length = 0;
    /**
    TYPE_ELEM    = 0;
    TMP_ELEM    = 1;
    TYPE_PROPERT    = 2;
    PROPERT        = 3;
    **/
    var cnt = 0;
    for(i in array_elements[0]) {
        cnt++;
    }
    for(i = 0; i < Number(cnt); i++) {
        switch(array_elements[0][i]) {
            case 'TEXT' :
                ARRAY_ELEM[i] = document.createTextNode(array_elements[1][i]);
                break;
            case 'html' :
                ARRAY_ELEM[i] = document.createElement('html');
                break;
            case 'head' :
                ARRAY_ELEM[i] = document.createElement('head');
                break;
            case 'body' :
                ARRAY_ELEM[i] = document.createElement('body');
                break;
            case 'link' :
                ARRAY_ELEM[i] = document.createElement('link');
                break;
            case 'title' :
                ARRAY_ELEM[i] = document.createElement('title');
                break;
            case 'meta' :
                ARRAY_ELEM[i] = document.createElement('meta');
                break;
            case 'style' :
                ARRAY_ELEM[i] = document.createElement('style');
                break;
            case 'header' :
                ARRAY_ELEM[i] = document.createElement('header');
                break;
            case 'main' :
                ARRAY_ELEM[i] = document.createElement('main');
                break;
            case 'footer' :
                ARRAY_ELEM[i] = document.createElement('footer');
                break;
            case 'ul' :
                ARRAY_ELEM[i] = document.createElement('ul');
                break;
            case 'li' :
                ARRAY_ELEM[i] = document.createElement('li');
                break;
            case 'div' :
                ARRAY_ELEM[i] = document.createElement('div');
                break;
            case 'span' :
                ARRAY_ELEM[i] = document.createElement('span');
                break;
            case 'strong' :
                ARRAY_ELEM[i] = document.createElement('strong');
                break;
            case 'br' :
                ARRAY_ELEM[i] = document.createElement('br');
                break;
            case 'h1' :
                ARRAY_ELEM[i] = document.createElement('h1');
                break;
            case 'h2' :
                ARRAY_ELEM[i] = document.createElement('h2');
                break;
            case 'h3' :
                ARRAY_ELEM[i] = document.createElement('h3');
                break;
            case 'h4' :
                ARRAY_ELEM[i] = document.createElement('h4');
                break;
            case 'h5' :
                ARRAY_ELEM[i] = document.createElement('h5');
                break;
            case 'h6' :
                ARRAY_ELEM[i] = document.createElement('h6');
                break;
            case 'nav' :
                ARRAY_ELEM[i] = document.createElement('nav');
                break;
            case 'section' :
                ARRAY_ELEM[i] = document.createElement('section');
                break;
            case 'dl' :
                ARRAY_ELEM[i] = document.createElement('dl');
                break;
            case 'ol' :
                ARRAY_ELEM[i] = document.createElement('ol');
                break;
            case 'dt' :
                ARRAY_ELEM[i] = document.createElement('dt');
                break;
            case 'dd' :
                ARRAY_ELEM[i] = document.createElement('dd');
                break;
            case 'hr' :
                ARRAY_ELEM[i] = document.createElement('hr');
                break;
            case 'i' :
                ARRAY_ELEM[i] = document.createElement('i');
                break;
            case 'small' :
                ARRAY_ELEM[i] = document.createElement('small');
                break;
            case 'i' :
                ARRAY_ELEM[i] = document.createElement('i');
                break;
            case 'sub' :
                ARRAY_ELEM[i] = document.createElement('sub');
                break;
            case 'sup' :
                ARRAY_ELEM[i] = document.createElement('sup');
                break;
            case 'table' :
                ARRAY_ELEM[i] = document.createElement('table');
                break;
            case 'caption' :
                ARRAY_ELEM[i] = document.createElement('caption');
                break;
            case 'thead' :
                ARRAY_ELEM[i] = document.createElement('thead');
                break;
            case 'tbody' :
                ARRAY_ELEM[i] = document.createElement('tbody');
                break;
            case 'tr' :
                ARRAY_ELEM[i] = document.createElement('tr');
                break;
            case 'th' :
                ARRAY_ELEM[i] = document.createElement('th');
                break;
            case 'td' :
                ARRAY_ELEM[i] = document.createElement('td');
                break;
            case 'a' :
                ARRAY_ELEM[i] = document.createElement('a');
                break;
            case 'button' :
                ARRAY_ELEM[i] = document.createElement('button');
                break;
            case 'fieldset' :
                ARRAY_ELEM[i] = document.createElement('fieldset');
                break;
            case 'form' :
                ARRAY_ELEM[i] = document.createElement('form');
                break;
            case 'input' :
                ARRAY_ELEM[i] = document.createElement('input');
                break;
            case 'label' :
                ARRAY_ELEM[i] = document.createElement('label');
                break;
            case 'option' :
                ARRAY_ELEM[i] = document.createElement('option');
                break;
            case 'select' :
                ARRAY_ELEM[i] = document.createElement('select');
                break;
            case 'textarea' :
                ARRAY_ELEM[i] = document.createElement('textarea');
                break;
            case 'img' :
                ARRAY_ELEM[i] = document.createElement('textarea');
                break;
            case '' :
                ARRAY_ELEM[i] = null;
                break;
            default: 
                console.log('Erreur : ' + ARRAY_FIELD_TYPE[i] + ' type inconnu.');
                break;
        }
    }
    /**
    TYPE_ELEM    = 0;
    TMP_ELEM    = 1;
    TYPE_PROPERT    = 2;
    PROPERT        = 3;
    **/
    cnt = 0;
    for(i in array_elements[2]) {
        cnt++;
    }
    for(i = 0; i < Number(cnt); i++) {
        elements_length = 0;
        for(j in array_elements[2][i]) {
            elements_length++;
        }
        if(elements_length <= 3) {
            for(j = 0; j < Number(elements_length); j++) {
                //                console.log('ARRAY_PROPERTY_TYPE[ ' + i + ' ][ ' + j + ' ] = ' + array_elements[2][i][j]);
                switch(array_elements[2][i][j]) {
                    case 'colSpan' :
                        ARRAY_ELEM[i].colSpan = Number.parseInt(array_elements[3][i][j]);
                        break;
                    case 'class' :
                        ARRAY_ELEM[i].className = array_elements[3][i][j];
                        break;
                    case 'id' :
                        ARRAY_ELEM[i].id = array_elements[3][i][j];
                        break;
                    case 'title' :
                        ARRAY_ELEM[i].title = array_elements[3][i][j];
                        break;
                    case 'href' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'accept' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'accept_charset' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'action' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'align' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'async' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'charset' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'checked' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'content' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'defer' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'disabled' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'enctype' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'formenctype' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'method' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'http-equiv' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'lang' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'itemprop' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'list' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'maxlength' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'minlength' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'name' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'readonly' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'rel' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'required' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'rows' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'rowspan' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'selected' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'src' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'target' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'type' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'value' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    case 'wrap' :
                        ARRAY_ELEM[i].href = array_elements[3][i][j];
                        break;
                    default: 
                        break;
                }
            }
        } else {
            //            console.log('ARRAY_PROPERTY_TYPE[ ' + i + ' ] = ' + array_elements[2][i]);
            switch(array_elements[2][i]) {
                case 'colSpan' :
                    ARRAY_ELEM[i].colSpan = Number.parseInt(array_elements[3][i]);
                    break;
                case 'class' :
                    ARRAY_ELEM[i].className = array_elements[3][i];
                    break;
                case 'id' :
                    ARRAY_ELEM[i].id = array_elements[3][i];
                    break;
                case 'title' :
                    ARRAY_ELEM[i].title = array_elements[3][i];
                    break;
                case 'href' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'accept' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'accept_charset' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'action' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'align' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'async' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'charset' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'checked' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'content' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'defer' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'disabled' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'enctype' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'formenctype' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'method' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'http-equiv' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'lang' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'itemprop' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'list' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'maxlength' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'minlength' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'name' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'readonly' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'rel' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'required' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'rows' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'rowspan' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'selected' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'src' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'target' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'type' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'value' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                case 'wrap' :
                    ARRAY_ELEM[i].href = array_elements[3][i];
                    break;
                default: 
                    break;
            }
        }
    }
    cnt = 0;
    for(i in ARRAY_ELEM) {
        cnt++;
    }
    for(i = Number(cnt) - 2; i>= 0; i--) {
//            console.log('Element[ ' + i + ' ] = ' + ARRAY_ELEM[i]);
        ARRAY_ELEM[i].appendChild(ARRAY_ELEM[i + 1]);
       
        if(i == (Number(cnt) - 2)) {
            j = i + 1; 
//            console.log('Element[ ' + j + ' ] = ' + ARRAY_ELEM[j].innerHTML);
        }
    }
    return ARRAY_ELEM[0].cloneNode();
}
 
Discussions similaires
Haut