Affichage d'un tableau et design

**md100** · 26/02/2020, 20h01

Bonsoir à tous !

Alors voilà j'ai besoin de vous, car j'ai actuellement un tableau (javascript) comme celui-ci :

Code :

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

1
2
3
4
5
6
7
8
const monTableau = [
new eleve('nom1', 'prenom1', 22, 17, 11, 8, 20),
new eleve('nom2', 'prenom2', 20, 13, 13, 7, 17),
new eleve('nom3', 'prenom3', 21, 12, 19, 8, 19),
new eleve('nom4', 'prenom4', 23, 11, 14, 12, 9),
new eleve('nom5', 'prenom5', 17, 13, 11, 19, 8),
new eleve('nom6', 'prenom6', 19, 19, 12, 8, 7)
]

new eleve(nom / prenom / age / notes ...)

J'ai besoin de vous, car je voudrais afficher le tableau complet, mais avec un design assez propre (de ce style par exemple mais avec mon tableau) :

Nom : tab1.png
Affichages : 151
Taille : 42,4 Ko

Nom : tab1.png
Affichages : 151
Taille : 42,4 Ko

Si quelqu'un est capable de me faire ça, ce serait sympa !

Merci à ceux qui prendront le temps de m'aider, et bonne soirée à tous

**javatwister** · 26/02/2020, 20h44

Bonsoir,

C'est avant tout un problème de css, non?

Javascript te servira seulement à générer une ligne sur deux avec un fond différent et à intégrer les valeurs dans le tableau;

Bref, ça doit faire 20 ans que des tutos extra simples sur css existent et permettent d'arriver à afficher un tableau avec les options voulues

**md100** · 26/02/2020, 21h43

Bah j'ai pas dit le contraire ?
C'est juste que j'ai un problème pour "design" un tableau javascript,
..avec un tableau html j'ai pas de problème, mais là si j'veux utiliser du css, je sais pas comment faire pour que ça prenne en compte mon tableau..
J'ai du mal à m'expliquer j'espère que tu comprends

**javatwister** · 27/02/2020, 00h21

Alors juste pour rigoler parce que je ne suis pas du tout designer

Mais si tu comprends le principe, tant mieux.

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
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
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
 
<style>
td, th  {min-width:80px;border:inset 2px silver;;text-align:center}
</style>
</head>
<body>
 
<div id="c"></div>
 
<script>
 
window.addEventListener("load",()=>{
 
function eleve (nom, prénom, age, note1, note2, note3, note4){
    this.nom    = nom;
    this.prenon = prénom;
    this.age    = age;
    this.notes  = [note1, note2, note3, note4]
}
 
const unTableauEtudiant = [
new eleve('a', 'aa', 18, 12, 13, 10, 15),
new eleve('b', 'bb', 19, 14, 12, 14, 12),
new eleve('c', 'cc', 17, 13, 19, 10, 8),
new eleve('d', 'dd', 20, 15, 10, 15, 9),
new eleve('e', 'ee', 21, 16, 13, 18, 10),
];
 
const t=document.createElement("table");
const tb=document.createElement("tbody");
const thead=document.createElement("thead");
thead.style.background="grey";
t.appendChild(thead);
t.appendChild(tb)
document.getElementById("c").appendChild(t);
 
unTableauEtudiant.forEach((v,i)=>{
        let tr=document.createElement("tr");
        if(i%2==1){
                tr.style.background="orange"
        }
 
        if(i==0){
                for(prop in v){
                        let th=document.createElement("th");
                        thead.appendChild(tr);
                        tr.appendChild(th);
                        th.textContent=prop;
                }
        }
        else{
                for(prop in v){
                        let td=document.createElement("td");
                        tb.appendChild(tr)
                        tr.appendChild(td);
                        td.textContent=v[prop];
                }
        }
})
 
</script>
</body>
</html>

Affichage d'un tableau et design

JavaScript

Discussions similaires

Partager

Partager