principale (ex: 'ttA266').
//
function analyserEtExtraireIdsWebDev(tableHeaderRowId) {
    var resultat = { sur_titres: [], titres: [] };
    var mainHeaderRow = $('#' + tableHeaderRowId);
    if (mainHeaderRow.length === 0) { console.error("Ligne '" + tableHeaderRowId + "' non trouvée."); return null; }
    var baseTable = mainHeaderRow.find('table[id$="_TITRES_POS"]');
    if (baseTable.length === 0) { console.error("Table _TITRES_POS non trouvée."); return null; }

    // Sur-titres
    baseTable.find('tr:first > td[colspan]').each(function(index) {
        var surTitreTd = $(this);
        resultat.sur_titres.push({
            index: index,
            texte: surTitreTd.text().trim().replace(/\s+/g, ' '),
            colspan: parseInt(surTitreTd.attr('colspan') || 1, 10),
            element_id: surTitreTd.attr('id') || null // <<< LE PROBLEME EST SOUVENT ICI
        });
    });

    // Titres
    baseTable.find('tr:eq(1) > td[id^="ttA"]').each(function() {
        var colTd = $(this);
        var titreDiv = colTd.find('[id*="_TITRES_"]');
        resultat.titres.push({
            id_colonne: colTd.attr('id'),
            id_conteneur: titreDiv.attr('id'),
            texte: titreDiv.find('td').first().text().trim()
        });
    });
    return JSON.stringify(resultat);
}

Problème : On s'est vite rendu compte que les `<td>` des sur-titres n'ont souvent pas d'ID, ce qui rend cette approche incomplète.

Solution 2 : Générer les Sélecteurs jQuery (Recommandée)

L'idée est bien meilleure : puisque notre but est d'utiliser jQuery, générons directement les sélecteurs uniques pour chaque élément !

 principale (ex: 'ttA266').
// @returns {string|null} - Une chaîne JSON avec les sélecteurs, ou null si erreur.
//
function analyserEtGenererSelecteursWebDev(tableHeaderRowId) {
    var resultat = { sur_titres: [], titres: [] };
    var mainHeaderRow = $('#' + tableHeaderRowId);
    if (mainHeaderRow.length === 0) { console.error("Ligne '" + tableHeaderRowId + "' non trouvée."); return null; }
    var baseTable = mainHeaderRow.find('table[id$="_TITRES_POS"]');
    if (baseTable.length === 0) { console.error("Table _TITRES_POS non trouvée."); return null; }
    var baseTableSelector = '#' + tableHeaderRowId + ' table[id$="_TITRES_POS"]';

    // Sur-titres
    baseTable.find('tr:first > td[colspan]').each(function(index) {
        var surTitreTd = $(this);
        resultat.sur_titres.push({
            index: index,
            texte: surTitreTd.text().trim().replace(/\s+/g, ' '),
            colspan: parseInt(surTitreTd.attr('colspan') || 1, 10),
            selector: baseTableSelector + ' tr:first > td:eq(' + index + ')' // <<< Le sélecteur !
        });
    });

    // Titres (on cible le 

Bonjour à toute la communauté WebDev, Je partage aujourd'hui une problématique que j'ai rencontrée et la solution que nous avons pu élaborer (avec l'aide précieuse d'une IA) : la personnalisation avancée des en-têtes de nos chers champs Table WebDev. A noter que c'est en étudiant ce post dans le forum que cette idée m'est venue : "Fixer une colonne à gauche" https://forum.pcsoft.fr/fr-FR/pcsoft.fr.webdev/58745-fixer-colonne-gauche/read.awp Le Problème : Nous savons tous que les champs Table sont puissants, mais il est parfois frustrant de vouloir appliquer des styles CSS spécifiques (couleurs de fond, polices, bordures...) à des cellules d'en-tête individuelles, surtout lorsqu'on utilise des sur-titres (cellules fusionnées / `colspan`). WebDev génère ses propres ID et structures HTML, et il n'est pas toujours évident d'agir dessus via les options standard ou même le WLangage côté serveur/navigateur. D'autant que lors de la définition de sur-titres dans l'entête du champ Table, le texte du sur entête n'est parfois pas du tout généré ! L'Objectif : Pouvoir cibler *n'importe quelle* cellule d'en-tête ou de sur-titre d'une table donnée afin de modifier son apparence dynamiquement, côté navigateur, en utilisant JavaScript et jQuery. L'Approche : Utiliser une fonction JavaScript, appelée depuis le WLangage Navigateur, pour analyser la structure HTML des en-têtes (reconnaissable par `_TITRES_POS` et `ttAxxx` dans le HTML généré) et en extraire les informations nécessaires pour les cibler. Le Code HTML Cible (Exemple) : Pour que tout le monde voie de quoi on parle, voici un exemple du type de code HTML que l'on cherche à analyser (ici, l'en-tête commence par `ttA266`) : <tr style="border:0;height:0;" id="ttA266"> <td id="tzcA266" style="width:100%;border-bottom-width:0"> <div style="overflow: hidden; position: relative; width: 996px;"> <table id="A266_TITRES_POS" style="width: 100%; display: table;"><tbody> <tr style="border:0;height:0;" id="ttA266"> <td colspan="4" ...>Données actuelles dans la  base </td> <td colspan="4" ...></td> </tr> <tr style="border:0;height:0;"> <td id="ttA284" ...><div ... id="A266_TITRES_0">...<td>N°</td>...</div></td> <td id="ttA267" ...><div ... id="A266_TITRES_1">...<td>Libellé</td>...</div></td> <td id="ttA272" ...><div ... id="A266_TITRES_3">...<td>Valeur</td>...</div></td> <td id="ttA282" ...><div ... id="A266_TITRES_5">...<td>Hist.</td>...</div></td> <td id="ttA274" ...><div ... id="A266_TITRES_6">...<td>Libellé</td>...</div></td> <td id="ttA281" ...><div ... id="A266_TITRES_8">...<td>Valeur</td>...</div></td> <td id="ttA290" ...><div ... id="A266_TITRES_10">...<td>Modifié</td>...</div></td> <td id="ttA286" ...><div ... id="A266_TITRES_12">...<td>Différent</td>...</div></td> <td id="ttA285" ...><div ... id="A266_TITRES_13">...<td>B</td>...</div></td> </tr> ... </tbody></table> </div> </td> <td></td> </tr> Solution 1 : Extraire les ID (Limitée) Une première idée était d'extraire les ID des éléments. // Tente d'extraire les ID des en-têtes et sur-titres. // @param {string} tableHeaderRowId - L'ID de la ligne

interne pour le style)     baseTable.find('tr:eq(1) > td[id^="ttA"]').each(function() {         var colTd = $(this);         var colId = colTd.attr('id');         var titreDiv = colTd.find('[id*="_TITRES_"]');         var tdInterne = titreDiv.find('td').first();         resultat.titres.push({             id_colonne: colId,             texte: tdInterne.text().trim(),             selector: '#' + colId + ' div[id*="_TITRES_"] td:first' // <<< Le sélecteur !         });     });     return JSON.stringify(resultat); } Comment Intégrer dans WebDev ? 1. Ajoutez la fonction JS : Placez la fonction `analyserEtGenererSelecteursWebDev` (Solution 2) dans une ressource JS chargée par votre page, ou dans le code `<HEAD>` de votre modèle de page. Assurez-vous que jQuery est chargé avant ! 2. Créez une procédure WLangage Navigateur : // Procédure Navigateur pour appliquer les styles à une table donnée // sIdLigneEntete: L'ID de la <tr> d'en-tête (ex: "ttA266") Procedure NAVIGATEUR AppliquerStylesTitresTableau(sIdLigneEntete est une chaîne) SI sIdLigneEntete = "" ALORS Trace("Erreur : ID de table non fourni.") RENVOYER FIN var idTableauCible = "%sIdLigneEntete%"; // Passage du paramètre WL -> JS var jsonTitres = Null; // Pour stocker le résultat // Vérifications d'usage IF (typeof jQuery === 'undefined') { console.error("jQuery n'est pas chargé !"); } ELSE IF (typeof analyserEtGenererSelecteursWebDev !== 'FUNCTION') { console.error("La fonction 'analyserEtGenererSelecteursWebDev' est introuvable !"); } ELSE { // On appelle notre fonction JS jsonTitres = analyserEtGenererSelecteursWebDev(idTableauCible); // --- C'EST ICI QU'ON UTILISE LES SÉLECTEURS --- IF (jsonTitres) { var Data = JSON.parse(jsonTitres); console.log("Sélecteurs générés :", Data); // Exemple 1: Mettre les 'Libellé' en gras/bleu Data.titres.forEach(FUNCTION(titre) { IF (titre.texte === 'Libellé') { $(titre.selector).css({'font-weight': 'bold', 'Color': 'navy'}); } }); // Exemple 2: Mettre un fond gris au 1er sur-titre IF (Data.sur_titres.length > 0) { $(Data.sur_titres[0].selector).css('Background-Color', '#EEEEEE'); } // Exemple 3: Mettre les 'Valeur' en italique Data.titres.forEach(FUNCTION(titre) { IF (titre.texte === 'Valeur') { $(titre.selector).css({'font-style': 'italic'}); } }); // Ajoutez ici TOUTE votre logique de style personnalisée ! } // --- FIN DE L'UTILISATION --- } 3. Appelez la procédure WL : Dans un événement navigateur (ex: "Fin d'initialisation" de la table, ou "Chargement" de la page), appelez votre procédure WLangage en lui passant l'ID de la ligne d'en-tête (à trouver via l'inspecteur F12 de votre navigateur, il ressemble à `ttAxxx`). // Exemple d'appel pour la table "MaTable." AppliquerStylesTitresTableau("tt" + MaTable..Alias) // Si vous avez une autre table MonAutreTable // AppliquerStylesTitresTableau("tt" + MonAutreTable..Alias) Conclusion : Cette approche, basée sur la génération de sélecteurs jQuery, offre une grande flexibilité pour manipuler l'apparence des en-têtes de tables WebDev, contournant ainsi certaines limitations de la stylisation standard. J'espère que ce partage sera utile à d'autres développeurs rencontrant le même besoin. N'hésitez pas à commenter, critiquer ou proposer des améliorations ! Bon code à tous ! --- -- René MALKA Message modifié, 25 mai 2025 - 16:35