3 pièce(s) jointe(s)
Afficher et formater des données dynamiquement
Bonjour,
J'ai un site classique en PHP + MySQL mais les données qu'il gère sont quasiment mortes (c'est un championnat, donc la donnée d'1 match ne change qu'une seule fois : quand on met à jour le score) et je voudrais donc le transformer en javascript avec lecture d'un fichier JSON que je génère seulement quand les données changent.
Mais je débute en javascript et je me pose des questions basiques sur la meilleure façon de faire.
Explication par l'exemple, voici ce que je veux faire :
Pièce jointe 583561
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html><head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr><td>largeur 1</td><td>largeur 2</td><td>largeur 3</td></tr>
<tr><td>largeur 1 mais en plus grand</td><td>largeur 2</td><td>largeur 3 plus grand</td></tr>
<tr><td>largeur 1</td><td>largeur 2</td><td>largeur 3</td></tr>
</table>
</body> |
Mon premier essai d'ajout de JSON :
Pièce jointe 583562
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
| <html><head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
</style>
<script>
var text = '{ "ligne" : [{ "col1":"largeur 1" , "col2":"largeur 2", "col3":"largeur 3" },' +
'{ "col1":"largeur 1 mais en plus grand" , "col2":"largeur 2", "col3":"largeur 3 plus grand" },' +
'{ "col1":"largeur 1" , "col2":"largeur 2", "col3":"largeur 3" }]}';
var tab = JSON.parse(text);
</script>
</head>
<body>
<table>
<tr><td><script>document.write(tab.ligne[0].col1);</script></td><td><script>document.write(tab.ligne[0].col2);</script></td><td><script>document.write(tab.ligne[0].col3);</script></td></tr>
<tr><td><script>document.write(tab.ligne[1].col1);</script></td><td><script>document.write(tab.ligne[1].col2);</script></td><td><script>document.write(tab.ligne[1].col3);</script></td></tr>
<tr><td><script>document.write(tab.ligne[2].col1);</script></td><td><script>document.write(tab.ligne[2].col2);</script></td><td><script>document.write(tab.ligne[2].col3);</script></td></tr>
</table>
</body> |
C'est pas mal car le résultat me convient, mais j'ai 2 soucis :
- je ne sais pas comment gérer le nombre de lignes (selon les championnats, le JSON pourra comporter plus ou moins de lignes)
- je ne sais pas comment gérer les ruptures (par exemple si je voulais tester le n° de journée pour faire je ne sais quoi...)
Donc j'ai fait un autre essai qui consiste, en gros :
- à prévoir dans mon HTML un nombre maximal de lignes invisibles (ici j'en ai mis 6 alors que je n'ai que 3 lignes à afficher)
- à boucler sur mon JSON pour alimenter les balises et les rendre visibles
Ce principe me permettrait, dans l'absolu, de gérer aussi mes ruptures... sauf que le résultat est plutôt catastrophique :
Pièce jointe 583563
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
| <html><head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
.invisible {
display: none;
}
</style>
</head>
<body>
<table>
<tr id="lig1" class="invisible"><td id="lig1col1"></td><td id="lig1col2"></td><td id="lig1col3"></td></tr>
<tr id="lig2" class="invisible"><td id="lig2col1"></td><td id="lig2col2"></td><td id="lig2col3"></td></tr>
<tr id="lig3" class="invisible"><td id="lig3col1"></td><td id="lig3col2"></td><td id="lig3col3"></td></tr>
<tr id="lig4" class="invisible"><td id="lig4col1"></td><td id="lig4col2"></td><td id="lig4col3"></td></tr>
<tr id="lig5" class="invisible"><td id="lig5col1"></td><td id="lig5col2"></td><td id="lig5col3"></td></tr>
<tr id="lig6" class="invisible"><td id="lig6col1"></td><td id="lig6col2"></td><td id="lig6col3"></td></tr>
</table>
<script>
var text = '{ "ligne" : [{ "col1":"largeur 1" , "col2":"largeur 2", "col3":"largeur 3" },' +
'{ "col1":"largeur 1 mais en plus grand" , "col2":"largeur 2", "col3":"largeur 3 plus grand" },' +
'{ "col1":"largeur 1" , "col2":"largeur 2", "col3":"largeur 3" }]}';
var tab = JSON.parse(text);
var nblig = tab.ligne.length;
var i;
var obj;
for (i = 1; i <= 6; i++) {
if (i <= nblig ) {
id='lig' + i.toString() + 'col1'; obj = document.getElementById(id); obj.innerHTML=tab.ligne[i-1].col1;
id='lig' + i.toString() + 'col2'; obj = document.getElementById(id); obj.innerHTML=tab.ligne[i-1].col2;
id='lig' + i.toString() + 'col3'; obj = document.getElementById(id); obj.innerHTML=tab.ligne[i-1].col3;
id='lig' + i.toString(); obj = document.getElementById(id); obj.style.display = "block";
}
}
</script>
</body> |
Apparemment, le navigateur n'est plus en mesure d'ajuster la taille des colonnes et le CSS semble aussi en vrac, la bordure a l'air doublée...
Bref, je ne vais pas plus loin dans mes tests car j'ai besoin d'avis compétents sur la meilleure façon de faire :
- un truc léger avec javascript+JSON
- mais avec un JSON dont je ne connais pas la taille
- et qui permette de jouer sur le CSS selon le contenu
Merci d'avance pour vos avis et vos retours d'expériences !
