Bonjour à tous,

je m'en remets à vous pour m'aider à résoudre un problème sur lequel je bute depuis un moment malgré mes recherches.

Alors, étant débutant dans le domaine, je ne sais pas si c'est la meilleure façon de procéder (sachant qu'à terme, j'irai chercher les données dans une base MySQL au lieu d'un fichier js) mais bon, c'est pour faire des essais...

Donc, j'ai un fichier html avec un code qui doit afficher un tableau et un fichier javascript pour les données du tableau.

Mon html est simplifié pour l'exemple :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<container class="mainUsers">
<!--construction de la table-->
  <table class="usersTableArea">
    <thead class="usersHeadRow" id="ID_usersHeadRow">
    </thead>
    <tbody class="usersTableRows" id="ID_usersTableRows">
    </tbody>
  </table>
</container>
 
<!--zone javascript-->
  <script  src="./js/usersManagement.js"></script>
  <script>         
    getUsersTH();
    getUsersTD();
  </script>
 
</body>

et mon fichier usersManagement.js est comme suit :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var tb_users = [
    {
        "ID" : "001",
        "firstname" : "Steve",
        "Name" : "JOBS",
        "Service" : "Marketing",
        "Title" : "CEO",
        "Phone" : "1984",
        "Email": "steve.jobs@apple.com",
        "Profil" : "administrateur"
    },
    {
        "ID" : "002",
        "firstname" : "Bob",
        "Name" : "DYLAN",
        "Service" : "Culture musicale",
        "Title" : "Chanteur",
        "Phone" : "1941",
        "Email": "bob.dylan@poprock.com",
        "Profil" : "user"
    }
]
 
//écriture des tête de colonnes
function getUsersTH(){
    const usersColumnHead = Object.keys(tb_users[0]);
    const usersTitleHead = document.getElementById("ID_usersHeadRow");
    let tags = "<tr class=usersTrHead>";
    for(i = 1; i < usersColumnHead.length; i++){
        if(i!=1){
            tags += `<th class="usersTh th0${[i]}">${usersColumnHead[i]}</th>`;
        }
    }
    tags += "</tr>"
    usersTitleHead.innerHTML = tags;
}
 
//écriture du tableau
function getUsersTD(){
    const usersColumnHead = Object.keys(tb_users[0]);
    const usersData = document.getElementById("ID_usersTableRows");
    let tags = "";
    tb_users.map(donnees => {
        tags += `<tr class=usersTrData>
 
                <td class="usersTd">${d.Name} ${d.firstname}</td>
                <td class="usersTd">${donnees.Service}</td>
                <td class="usersTd">${donnees.Title}</td>
                <td class="usersTd">${donnees.Phone}</td>
                <td class="usersTd">${donnees.Email}</td>
                <td class="usersTd">${donnees.Profil}</td>`
 
        tags +=  `</tr>`
    })
    usersData.innerHTML = tags;
}
Je vous passe la partie des class CSS qui fonctionne très bien.
Jusque-là, mon tableau s'affiche impeccable. (j'ai combiné le nom et prénom dans la même colonne)
Nom : tableau.jpg Affichages : 116 Taille : 20,0 Ko

J'aimerai en revanche donner la possibilité au utilisateur d'ajouter des colonnes. Seulement le script n'en tiendrait pas compte...
J'ai donc voulue créer une bouche FOR au niveau de l'écriture des balises <td> un peu comme ça :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 tb_users.map(donnees => {
        tags += `<tr class=usersTrData>`
 
        for(i=1; i < usersColumnHead.length;i++){
            if(i!=1){
                tags += `<td class="usersTd">${usersColumnHead[i]}</td>`;
            }
        }
 
        tags +=  `</tr>`
    })
Le tableau se remplis mais avec les noms des colonnes partout. C'est normal, je demande de mettre usersColumnHead[i] qui est le nom des colonnes...
(le if(i!=1){} c'est pour passer le prénom)
Nom : tableau3.jpg Affichages : 105 Taille : 16,6 Ko

En fait, j'aurais voulu faire un truc du genre donnees.usersColumnHead[i] afin de remplacer les donnees.Name, donnees.firstname, etc...
J'ai essayé ${donnees}.${usersColumnHead[i]}, ${donnees.usersColumnHead[i]} mais ça ne fonctionne pas...

par exemple, le ${donnees}.${usersColumnHead[i]} me donne ça :
Nom : tableau2.jpg Affichages : 110 Taille : 24,2 Ko

Auriez-vous une solution ?
Merci d'avance