Affichage tableau sur page html

**mafooley** · 17/06/2024, 04h19

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 : 77
Taille : 20,0 Ko

Nom : tableau.jpg
Affichages : 77
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 : 68
Taille : 16,6 Ko

Nom : tableau3.jpg
Affichages : 68
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 : 74
Taille : 24,2 Ko

Nom : tableau2.jpg
Affichages : 74
Taille : 24,2 Ko

Auriez-vous une solution ?
Merci d'avance

**NoSmoking** · 17/06/2024, 09h14

Bonjour,
tu ne cible pas le contenu mais l'« enveloppe » !
Essaie quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
const userKeys = Object.keys(tb_users[0]);
// pour tous les users
tb_users.forEach((user) => {
  userKeys.forEach((key) => {
    if ("firstname" !== key) {
      console.log(`${key} : ${user[key]}`);
    }
  })
});

**mafooley** · 18/06/2024, 00h44

Super, merci beaucoup.

Pour ceux qui voudraient mon code :

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
function getUsersTD(){
    const userKeys = Object.keys(tb_users[0]);
    const usersData = document.getElementById("ID_usersTableRows");
    let tags = "";
    tb_users.forEach((user) =>{
        tags += `<tr class=usersTrData>`;
        userKeys.forEach((key) => {
            if(key !== "firstname"){
                if(key !== "ID"){ //je vire l'ID
                    if(key == "Name"){ //je vire le prénom
                        tags += `<td class="usersTd td_${key}">${user.firstname} ${user[key]}</td>`; //je combine nom et prénom si la clé est Name
                    }else{
                       tags += `<td class="usersTd td_${key}">${user[key]} </td>`;
                    }
                }
            }
        })
        tags +=  `</tr>`;
    });
 
    usersData.innerHTML = tags;
}

J'ai bien sur conservé mon code qui créé les têtes de colonne.

Encore merci. A+

Affichage tableau sur page html

JavaScript

Discussions similaires

Partager

Partager