3 pièce(s) jointe(s)
Affichage tableau sur page html
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:
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:
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)
Pièce jointe 656091
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:
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)
Pièce jointe 656093
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 :
Pièce jointe 656092
Auriez-vous une solution ?
Merci d'avance :D
