Tableau avec plusieurs valeurs pour une même colonne

**SophieMu31** · 20/12/2016, 14h02

Bonjour,

Je suis nouvelle sur le forum et débutante en javascript.

Mon problème est que j'ai fait un tableau en html qui s'alimente automatiquement à partir d'un fichier Excel.
Le tableau me remonte : Le mois de la date ,une date et un chiffre nommé ATA.
Sauf que pour une date je peux avoir plusieurs chiffre.

J'arrive à alimenter mon tableau :

Mois                Date                  ATA
fevrier          01/02/2017             22  
Mars             01/03/2017             31
fevrier          01/02/2017             33
avril            01/04/2017             34

sauf que moi j'aimerais que pour la même date, il m'affiche les deux chiffres sur la même ligne.
Comme-ci dessous :

Mois                Date                  ATA
fevrier          01/02/2017             22 & 33
Mars             01/03/2017             31
avril            01/04/2017             34

Ci-joint mon code :

HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<table   id="planning350">
<thead>
<tr><td colspan='3' id= "tdplanning"> Planning des ATA </td> </tr>
<tr >
   <td >Mois </td>
   <td >Date </td>
   <td >ATA </td> 
</tr>
</thead>
<tbody></tbody>
</table>

JAVA SCRIPT

Code :

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

1
2
3
4
5
6
var json_mois={"01":"Janvier", "02":"Février","03":"Mars","04":"Avril","05":"Mai","06":"Juin","07":"Juillet","08":"Août","09":"Septembre","10":"Octobre","11":"Novembre","12":"Décembre"}
 
p.forEach(function(item)
{
$("#planning350 tbody").append("<tr><td>"+json_mois[item["Date"].split("/")[1]]+ "</td><td>"+item["Date"]+ "</td><td>"+item["ATA"]+ "</td> </tr>");
})

Merci beaucoup pour votre aide.
je bloque vraiment la dessus et je penses que ca ne doit pas être bien compliqué.

merci

Sophie

**NoSmoking** · 21/12/2016, 10h25

Bonjour,

Le tableau me remonte : Le mois de la date ,une date et un chiffre nommé ATA.
Sauf que pour une date je peux avoir plusieurs chiffre.

pourrais tu nous montrer un exemple de ce que tu cherches à traiter, il y à de la boucle dans l'air

**SophieMu31** · 21/12/2016, 10h32

Bonjour Nosmocking,

Je ne comprends pas bien ta question.
J'ai mis un exemple dans la présentation.
je veux que si une date correspond à plusieurs chiffres (ATA ) il me les remontent.

Exemple :

si dans mon fichier Excel j'ai pour la date du 01/02/2017 j'ai ATA 23 et 24.
je souhaite qu'il me le retranscrive dans le tableau HTML les deux ATA pour la même date
Au lieu de ça j'ai deux lignes pour une même date pour deux ATA différent.

j'ai essayé de faire une boucle for ou if mais je ne suis pas arrivée .. j'ai du mal m'y prendre.

Je n'ai peut être pas précisé mais mon fichier Excel j'ai une colonne nommé "Date" et une colonne nomme "ATA".

Merci pour votre aide.

**NoSmoking** · 21/12/2016, 16h00

Certes mais on ne sait pas à quoi ressemble p que tu utilises dans p.forEach même si l'on peut le deviner, cela est surtout intéressant en cas d'« ATA » pour la même date.

j'ai essayé de faire une boucle for ou if mais je ne suis pas arrivée .. j'ai du mal m'y prendre.

n'hésite pas à nous montrer ce que tu as essayé.

**SophieMu31** · 21/12/2016, 16h11

Oui en effet je n'ai pas précisé et ce n'est pas bien parlant.
p est défini par un tableau vide : var p=[];

Merci pour votre aide. je bloque vraiment sur ce point.

Merci

**danielhagnoul** · 21/12/2016, 18h40

Envoyé par SophieMu31

[...] tableau en html qui s'alimente automatiquement à partir d'un fichier Excel [...]

Pour tester votre problème, il nous manque le ficher JSON généré (un extrait ou si confidentiel un exemple réaliste) à partir du fichier Excel et la copie du code JS que vous avez utilisé (même s'il ne fonctionne pas) pour traiter les données.

**SophieMu31** · 22/12/2016, 10h26

Bonjour,

Ci-joint , le fichier Excel , html et javascript en n'ayant que les informations utiles.
pour le fichier Json si c'est celui que je penses il est trop important.
Mais je penses que ce bout de code suffit (j'espère)

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
function sheet_to_json(sheet, opts){
	var val, row, range, header = 0, offset = 1, r, hdr = [], isempty, R, C, v;
	var o = opts != null ? opts : {};
	var raw = o.raw;
	if(sheet == null || sheet["!ref"] == null) return [];
	range = o.range !== undefined ? o.range : sheet["!ref"];
	if(o.header === 1) header = 1;
	else if(o.header === "A") header = 2;
	else if(Array.isArray(o.header)) header = 3;
	switch(typeof range) {
		case 'string': r = safe_decode_range(range); break;
		case 'number': r = safe_decode_range(sheet["!ref"]); r.s.r = range; break;
		default: r = range;
	}
	if(header > 0) offset = 0;
	var rr = encode_row(r.s.r);
	var cols = new Array(r.e.c-r.s.c+1);
	var out = new Array(r.e.r-r.s.r-offset+1);
	var outi = 0;
	for(C = r.s.c; C <= r.e.c; ++C) {
		cols[C] = encode_col(C);
		val = sheet[cols[C] + rr];
		switch(header) {
			case 1: hdr[C] = C; break;
			case 2: hdr[C] = cols[C]; break;
			case 3: hdr[C] = o.header[C - r.s.c]; break;
			default:
				if(val === undefined) continue;
				hdr[C] = format_cell(val);
		}
	}
 
	for (R = r.s.r + offset; R <= r.e.r; ++R) {
		rr = encode_row(R);
		isempty = true;
		row = header === 1 ? [] : Object.create({ __rowNum__ : R });
		for (C = r.s.c; C <= r.e.c; ++C) {
			val = sheet[cols[C] + rr];
			if(val === undefined || val.t === undefined) continue;
			v = val.v;
			switch(val.t){
				case 'e': continue;
				case 's': break;
				case 'b': case 'n': break;
				default: throw 'unrecognized type ' + val.t;
			}
			if(v !== undefined) {
				row[hdr[C]] = raw ? v : format_cell(val,v);
				isempty = false;
			}
		}
		if(isempty === false) out[outi++] = row;
	}
	out.length = outi;
	return out;
}

**NoSmoking** · 24/12/2016, 11h02

Deux petites remarques pour commencer

quand on utilise jQuery autant l'utiliser complétement même pour tes requêtes Ajax

Il existe la balise <caption> pour le <table> ce qui donnerait le HTML suivant

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<table id="planning">
    <caption>Planning des réunions</caption>
    <thead>
        <tr >
            <td>Mois</td>
            <td>Date</td>
            <td>ATA</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Rentrons dans le vif du sujet.
J'en conclu après lecture que tu obtiens un objet du type

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
var data = [
  {"ATA": 20,"Date": ""},
  {"ATA": 21,"Date": "08/11/2016"},
  {"ATA": 22,"Date": "01/02/2017"},
  {"ATA": 23,"Date": "01/03/2017"},
  {"ATA": 24,"Date": ""},
  {"ATA": 25,"Date": ""},
  {"ATA": 26,"Date": ""},
  {"ATA": 27,"Date": "20/09/2016"},
  {"ATA": 28,"Date": "08/12/2016"},
  {"ATA": 29,"Date": "01/06/2017"},
  {"ATA": 30,"Date": ""},
  {"ATA": 31,"Date": ""},
  {"ATA": 32,"Date": "05/04/2017"},
  {"ATA": 33,"Date": "03/05/2017"},
  {"ATA": 34,"Date": ""},
  {"ATA": 35,"Date": "01/02/2017"},
  {"ATA": 36,"Date": ""},
  {"ATA": 38,"Date": ""},
  {"ATA": 42,"Date": ""},
  {"ATA": 44,"Date": ""},
  {"ATA": 46,"Date": "05/04/2017"},
  {"ATA": 47,"Date": ""},
  {"ATA": 49,"Date": "01/03/2017"},
  {"ATA": 52,"Date": ""},
  {"ATA": 73,"Date": ""},
  {"ATA": 92,"Date": ""}
];

sur cette base voilà ce que je te propose.

• Avant toutes choses, il te faut trier tes données par ordre de date

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* tri les dates au format jj/mm/aaaa
**/
function triParDate(a, b) {
  var aDate = a.Date.split('/').reverse().join('');
  var bDate = b.Date.split('/').reverse().join('');
  if (aDate === bDate ){
    return a.ATA > b.ATA ? 1 : -1;  
  }
  return aDate > bDate ? 1 : -1;
}
// il faut d'abord trier par date
data.sort(triParDate);

• Il ne faut conserver que ce qui t’intéresse, exemple en prenant la date du jour comme référence

Code :

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

1
2
3
4
5
6
7
8
// date de prise en compte
var d = new Date();
var dateRef = '' +d.getFullYear() +(d.getMonth() +1) +d.getDate();
 
// récup. des données concernées
var dataTable = data.filter( function(obj){
    return (dateRef <= obj.Date.split('/').reverse().join(''));
  });

au final, dataTable contient les données à afficher.

• Il reste à créer le HTML à injecter dans le <tbody>, voici une façon de faire commentée pour que tu t'y retrouves

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
// construction du contenu de la table
var html = [];
var i, nb = dataTable.length;
var previousDate = 'jj/mm/aaaa';        
var ligneEnCours = false;     // évite fermeture balise la 1st fois
for (i = 0; i < nb; i += 1) {
  // condition sur la date
  if (dataTable[i].Date) {
    // si date différente on crée une nouvelle ligne
    if (dataTable[i].Date !== previousDate) {
      // fermeture de la ligne précédente éventuelle
      if (ligneEnCours) {
        html.push('</td></tr>');
      }
      // ouvre la ligne
      html.push('<tr>');
      // ajout mois
      html.push('<td>' + (json_mois[dataTable[i].Date.split('/')[1]] || '?') + '</td>');
      // ajout date      
      html.push('<td>' + dataTable[i].Date + '</td>');
      // ajout le ATA sans fermer la cellule
      html.push('<td>' + dataTable[i].ATA);
      // nouvelle date de réfèrence
      previousDate = dataTable[i].Date;
      // traitement en cours
      ligneEnCours = true;
    }
    // sinon on ajoute
    else {
      html.push(' - ' + dataTable[i].ATA);
    }
  }
}
// on ferme proprement
html.push('</td></tr>');

html contient le code à injecter

• Pour finir on injecte le code

Code :

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

1
2
3
// on injecte le code dans le <tbody>
var oTable = document.querySelector('#planning');
oTable.tBodies[0].innerHTML = html.join('');

Exemple
Fichier de test sur base de ce que tu as fournis

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="fr">
<head>
<meta charset ="UTF-8">
<title>...</title>
<meta name="Author" content="NoSmoking">
<style>
table {
  border: 1px solid #888;
  border-collapse: separate;
  border-spacing: 0;
  font: 1em Verdana,Geneva,Arial,Helvetica,sans-serif;
  background-color: #FFF;
}
table thead tr {
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2) )repeat scroll 0% 0% #EEE;
}
table caption {
  padding: .5em;
  font-size: 1.5em;
  font-weight: bold;
  color: #666;
}
table thead td {
  border-top: 1px solid white;
  text-align: center;
  text-shadow: 1px 1px 0 #FFF;
}
table tbody tr:first-child td {
  border-top: 1px solid #888;
}
table tbody td {
  border-top: 1px solid #CCC;
}
table td {
  padding: 0.5em;
  min-width: 10em;
  border-right: 1px solid #888;
  border-left: 1px solid #FFF;
  white-space: nowrap;
  word-break: normal;
}
table tr td:last-child {
  border-right: none;
}
</style>
</head>
<body>
<table id="planning">
    <caption>Planning des réunions</caption>
    <thead>
        <tr >
            <td>Mois</td>
            <td>Date</td>
            <td>ATA</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>  
<script>
var data = [
  {"ATA": 20,"Date": ""},
  {"ATA": 21,"Date": "08/11/2016"},
  {"ATA": 22,"Date": "01/02/2017"},
  {"ATA": 23,"Date": "01/03/2017"},
  {"ATA": 24,"Date": ""},
  {"ATA": 25,"Date": ""},
  {"ATA": 26,"Date": ""},
  {"ATA": 27,"Date": "20/09/2016"},
  {"ATA": 28,"Date": "08/12/2016"},
  {"ATA": 29,"Date": "01/06/2017"},
  {"ATA": 30,"Date": ""},
  {"ATA": 31,"Date": ""},
  {"ATA": 32,"Date": "05/04/2017"},
  {"ATA": 33,"Date": "03/05/2017"},
  {"ATA": 34,"Date": ""},
  {"ATA": 35,"Date": "01/02/2017"},
  {"ATA": 36,"Date": ""},
  {"ATA": 38,"Date": ""},
  {"ATA": 42,"Date": ""},
  {"ATA": 44,"Date": ""},
  {"ATA": 46,"Date": "05/04/2017"},
  {"ATA": 47,"Date": ""},
  {"ATA": 49,"Date": "01/03/2017"},
  {"ATA": 52,"Date": ""},
  {"ATA": 73,"Date": ""},
  {"ATA": 92,"Date": ""}
];
var json_mois={"01":"Janvier", "02":"Février","03":"Mars","04":"Avril","05":"Mai","06":"Juin","07":"Juillet","08":"Août","09":"Septembre","10":"Octobre","11":"Novembre","12":"Décembre"};
/**
* tri les dates au format jj/mm/aaaa
**/
function triParDate(a, b) {
  var aDate = a.Date.split('/').reverse().join('');
  var bDate = b.Date.split('/').reverse().join('');
  if (aDate === bDate ){
    return a.ATA > b.ATA ? 1 : -1;  
  }
  return aDate > bDate ? 1 : -1;
}
// il faut trier par date
data.sort(triParDate);
 
// date de prise en compte
var d = new Date();
var dateRef = '' +d.getFullYear() +(d.getMonth() +1) +d.getDate();
 
// récup. des données concernées
var dataTable = data.filter( function(obj){
    return (dateRef <= obj.Date.split('/').reverse().join(''));
  });
 
// construction du contenu de la table
var html = [];
var i, nb = dataTable.length;
var previousDate = 'jj/mm/aaaa';        
var ligneEnCours = false;     // évite fermeture balise la 1st fois
for (i = 0; i < nb; i += 1) {
  // condition sur la date
  if (dataTable[i].Date) {
    // si date différente on crée une nouvelle ligne
    if (dataTable[i].Date !== previousDate) {
      // fermeture de la ligne précédente éventuelle
      if (ligneEnCours) {
        html.push('</td></tr>');
      }
      // ouvre la ligne
      html.push('<tr>');
      // ajout mois
      html.push('<td>' + (json_mois[dataTable[i].Date.split('/')[1]] || '?') + '</td>');
      // ajout date      
      html.push('<td>' + dataTable[i].Date + '</td>');
      // ajout le ATA sans fermer la cellule
      html.push('<td>' + dataTable[i].ATA);
      // nouvelle date de réfèrence
      previousDate = dataTable[i].Date;
      // traitement en cours
      ligneEnCours = true;
    }
    // sinon on ajoute
    else {
      html.push(' - ' + dataTable[i].ATA);
    }
  }
}
// on ferme proprement
html.push('</td></tr>');
// on injecte le code dans le <tbody>
var oTable = document.querySelector('#planning');
oTable.tBodies[0].innerHTML = html.join('');
</script>
</body>
</html>

~~Nota : testé sur FireFox uniquement !~~
[EDIT] Correction du code après test sur IE et Chrome

function triParDate
initialisation date du jour

Tableau avec plusieurs valeurs pour une même colonne

JavaScript

Discussions similaires

Partager

Partager