Contenu d'un tableau suivant date

Version imprimable

20/10/2015, 16h55
gisclace

Contenu d'un tableau suivant date

Bonjour à tous,
J'ai une petite demande sur une chose que je voudrais faire sur une page.

J'ai deux tableaux:
Le premier ne comporte qu'une ligne contenant : date / heure / nom 1 / nom 2 / lieu
Le second contient x lignes sous la même structure : date / heure / nom 1 / nom 2 / lieu

Le principe est que quand une date est passée, j'efface le contenu du tableau 1 et copie/colle les valeurs de la prochaine date du tableau 2.

Ma question est donc, est-il possible au chargement de la page, que le contenu du tableau 1 regarde la future date la plus proche dans le tableau 2 et remplisse donc en conséquence le tableau 1 ?

Merci par avance si l'un de vous à une solution et ou une piste.
21/10/2015, 12h09
Christophe P.

Bonjour,

l'événement onload permet de lancer un script au chargement de la page.
Créez une fonction qui cherche dans le tableau 2 la date qui vous intéresse et qui la met dans le tableau 1, puis appelez cette fonction avec onload.

Merci pour la réponse, je vois donc que c'est possible.
Pour le moment mon code est simplement 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
Prochaine date :
<table border ="0">
   <tr>
       <td width=15%><div align=center>Date</div></td>
       <td width=35%><div align=center>Nom1</div></td>
       <td width=35%><div align=center>Nom2</div></td>
       <td width=15%><div align=center>Lieu</div></td>
   </tr>
   <tr>
       	<td><div align=center>31/10</div></td>
       	<td><div align=center>Foobar_1</div></td>
		<td><div align=center>Foobar_2</div></td>
		<td><div align=center>Foobar</div></td>
   </tr>
   </table>
   <br /><br />
   Toutes les dates :
<table border ="0">
   <tr>
       <td width=15%><div align=center>Date</div></td>
       <td width=35%><div align=center>Nom1</div></td>
       <td width=35%><div align=center>Nom2</div></td>
       <td width=15%><div align=center>Lieu</div></td>
   </tr>
      <tr>
       	<td><div align=center>5/10</div></td>
       	<td><div align=center>Foobar_1</div></td>
		<td><div align=center>Foobar_2</div></td>
		<td><div align=center>Foobar</div></td>
   </tr>
   <tr>
       	<td><div align=center>31/10</div></td>
       	<td><div align=center>Foobar_1</div></td>
		<td><div align=center>Foobar_2</div></td>
		<td><div align=center>Foobar</div></td>
   </tr>
      <tr>
       	<td><div align=center>12/11</div></td>
       	<td><div align=center>Foobar_1</div></td>
		<td><div align=center>Foobar_2</div></td>
		<td><div align=center>Foobar</div></td>
   </tr>
</table>

Je t'avoue que je suis un peu perdu sur la marche à suivre (plus du côté de la fonction qui cherche puis rempli que la partie onload), aurais-tu une piste ou site où je puisse trouver ça ?
(pas forcément le code tout fait hein)

Merci.

21/10/2015, 15h54
Christophe P.

Si le fichier est généré, il doit être possible de modifier la génération pour sélectionner la date du tableau 2 et l'écrire dans le tableau 1.

Si le fichier est écrit manuellement, il faut nommer les tableaux puis utiliser du JavaScript. Il y a plein d'infos sur le site :
http://jpvincent.developpez.com/tuto...ux-javascript/
http://javascript.developpez.com/tut...n/?page=page_5
http://javascript.developpez.com/faq...pt/?page=Table
21/10/2015, 17h01
gisclace

ok, donc si je comprends bien, je dois faire :

Donner un id au tableau 1
Donner un id au tableau 2

Prendre la date du jour, lire par l'id du tableau 2 la valeur de ligne 1, cellule 1; si c'est plus petit, je passe à ligne 2, cellule 1, si c'est plus grand, je prends les valeurs de ligne 1 cellule 1,2,3 et 4 que j'envoie dans tableau 1 en utilisant son id?

Ai-je bon ?

Merci pour ton coup demain.
21/10/2015, 17h41
Christophe P.

Cela me semble être ça. Si les dates du tableau 2 ne sont pas dans l'ordre, il faut toutes les parcourir.
21/10/2015, 17h52
NoSmoking

Bonjour,
pour commencer, aucune chance de faire cela en HTML qui d'ailleurs n'est pas prévu pour cela.

Comme tu l'as dit Christophe P., il est préférable de faire cela coté serveur si tu en as la possibilité.

Le javascript est également jouable sur ce coup, ta démarche est effectivement la bonne et il y aura, comme toujours, plusieurs façons de faire.

Bonjour,
En effet je pense que comme pour tout en informatique, il doit y avoir autant de solution que de codeur. (déjà si j'arrive à en trouver une qui fonctionne ce sera bien :mrgreen: )

Pour le moment, voici où j'en suis :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<SCRIPT LANGUAGE="JavaScript">
 
var date=new Date();
var dateClean=(date.getDate(),"/",date.getMonth()+1); //cette partie me donne la date sous forme 22/10
document.write(dateClean); //ici je voulais juste contrôler que la date sort bien comme il faut, bizarrement, non... j’obtiens 10 au lieu de 22/10 (alors qu'en faisant document.write(date.getDate(),"/",date.getMonth()+1); , j'ai bien 22/10, donc premier truc bizarre que je ne comprend pas)
 
$dateTest=(document.getElementById("tout").rows[1].cells[0].innerHTML); //ici je récupère la valeur de la cellule qui contient la date à comparer à la date du jour
if ($dateTest<dateClean){ //là je veux comparer les deux dates (bien entendu si dateClean ne ressort pas la date sous forme 22/10, je ne pense pas que cela puisse fonctionner
document.write($dateTest);} //dans un premier temps, si la date du tableau est inférieur à la date du jour, je veux juste écrire dans la page la date (histoire de voir si cela fonctionne)
else {
   document.getElementById("prochain").rows[1].cells[0].innerHTML = "test"; //si la date du tableau est supérieur à la date du jour, la date est écrite dans le tableau 1
}

Je précise (mais je pense que c'est évident) que javascript n'est pas du tout le langage dans lequel je suis le plus à l'aise...

Merci par avance

J'avance j'avance !!!!

Par contre, il y a un truc que je ne comprends pas là.

Voici mon code à jour :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<SCRIPT LANGUAGE="JavaScript">
$i=1;
$cell=(document.getElementById("tout").rows[$i].cells[0].innerHTML); //dans cette cellule j'ai 10/23/2015
$ligne=(document.getElementById("tout").rows[$i].innerHTML); //ici c'est pour copier toute la ligne (qui sera à coller si la date ($cell) est plus grande que la date du jour(dateDuJour))
 
var date = new Date(); //donne la date du jour
var dateDuJour = new Date(date.getFullYear(), date.getMonth(), date.getDate()); //clean la date du jour sous fourme MM/JJ/AAAA (d’ailleurs je dois trouver comment faire : JJ/MM)
 
var specificDate = new Date($cell);
 
if (dateDuJour.getTime() < specificDate.getTime())
{
    document.getElementById("prochain").rows[1].innerHTML = $ligne; //ici on colle dans le tableau 1 la ligne du tableau 2 ($ligne)
}
else
{
    document.write("Partie deux à faire quand la partie 1 marchera");
 
}
 
</SCRIPT>

Le soucis est que la date prise dans $cell est considérée invalide.
Si je fais : document.write($cell); ,ça note : 10/23/2015, si je mets : var specificDate = new Date("10/23/2015"); , çà fonctionne.

D'où cela vient à votre avis ? Je dois convertir la string en date ?

22/10/2015, 15h44
Christophe P.
Petite remarque : éviter de nommer des variables comme des fonctions existantes (exemple : date et Date).
Je pense qu'il faut découper $cell (avec la fonction split) pour faire comme pour dateDuJour. Quelque chose comme ça (non testé) :
Code:

1 2 var dateSplit = $cell.split('/'); var maDate = new Date(dateSplit[2], dateSplit[1], dateSplit[0]);
Édition : correction du code (tableau avec crochet).
22/10/2015, 16h10
gisclace

Quand j'utilise des () dans ta fonction ça ne fait rien, quand je passe en [] par contre oui.

Mais, ça ne fonctionne pas, j'ai toujours en retour : Invalid Date quand je fais : document.write(maDate);

Par contre, je constate un truc étrange, quand je fais :

document.write(dateSplit[0]); j'ai : 10 (bizarrement, centré dans la page au passage, mais bon)
document.write(dateSplit[1]); j'ai : 23
document.write(dateSplit[1]); j'ai : 2015<

Alors que quand je fais : document.write($cell); j'ai bien : 10/23/2015, sans la parenthèse pointue d'ouverture...
22/10/2015, 16h19
Christophe P.

J'avais oublié que les tableaux en JavaScript utilisent des crochets.
Quel est le code HTML où se trouve le "2015" ? Il n'y aurait pas un "<" en trop par hasard ?
22/10/2015, 16h24
gisclace
La ligne est toute bête :

Code:

<td><div align=center>10/23/2015</div></td>

J'ai essayé de rentrer 10/23/2015/

Ça me donne bien 2015 quand je fais :

Code:

document.write(dateSplit[2]);

Par contre, quand je fais :
Code:

1 2 3 var dateSplit = $cell.split('/'); var maDate = new Date(dateSplit[2], dateSplit[1], dateSplit[0]); document.write(maDate);
j'ai toujours : Invalid Date
22/10/2015, 16h32
Christophe P.

Là, je sèche.

N'oublie pas de mettre la balise CODE pour le code, c'est plus lisible.
22/10/2015, 16h35
gisclace

Haaaa non !! tu ne peux pas me faire ça !!! :mrgreen:

Sinon as-tu une autre piste ? quitte à générer le tableau 2 autrement qu'à la main en html ?

ps : c'est vrai que souvent je zappe les balise pour deux trois lignes, je vais éditer.
22/10/2015, 17h12
Christophe P.

Ton problème est vraiment bizarre. Je me demande s'il n'y a pas un effet de bord quelque part. Par hasard, tu n'aurais pas différents éléments avec le même identifiant ?
As-tu essayé de nommer la balise div concernée et de récupérer la date directement sur elle ?

En générant la page, et donc les deux tableaux (avec du PHP par exemple), tu peux parcourir tes données sans les afficher afin de trouver la date à mettre dans le tableau 1.
Si tu ne connais pas le PHP (ou Java), ça va être difficile. De plus, il faut stocker les données de ton tableau quelque part (fichier texte ou base de données), afin de pouvoir les modifier facilement, ce qui demande d'autres manipulations.

Bon, c'est très bizarre...
En partant de ton idée, j'ai commencé par nommer la <td> concernée et virer la div center, miracle, ça fonctionne (sans le split), partant de là, j'ai retiré l'id et ai remis l'ancien code ( .rows[$i].cells[0] )

Et ça fonctionne... donc en gros ça vient de la balise div, pour le moment la date sera pas centrée, c'est pas grave je le ferai dans le css. :aie:

Bon étape suivante, faire la boucle.

Je place le code propre en l'état :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <SCRIPT LANGUAGE="JavaScript"> $i=1; $cell2=(document.getElementById("tout").rows[$i].cells[0].innerHTML); //coordonnées de la cellule contenant la date $ligne=(document.getElementById("tout").rows[$i].innerHTML); //coordonnées de la ligne à dupliquer var dateComplete = new Date(); //date du jour brute var dateDuJour = new Date(dateComplete.getFullYear(), dateComplete.getMonth(), dateComplete.getDate()); //date du jour épurée var maDate = new Date($cell2); //passage du contenu de la cellule source en date if (dateDuJour.getTime() < maDate.getTime()) //si la date dur jour est inférieur à la date source { document.getElementById("prochain").rows[1].innerHTML = $ligne; //on colle la ligne du tableau 2 dans le tableau 1 } else { $i=$i+1;//on rajoute 1 à $i et on recommence (partie à faire) } </SCRIPT>
(ps : je souhaite éviter au maximum d'utiliser php, sql and co pour ce site, le code je le place après dans un cms que j’affiche dans une appli android et ios via webview)

22/10/2015, 18h04
gisclace

Est-ce qu'il serait possible de demander un petit coup de main pour faire la boucle ?

Entre les if, while, do, je suis complétement pommé :oops:

Il y a pas mal à dire, commençons par le HTML

• <SCRIPT LANGUAGE="JavaScript"> est obsoléte mettre simplement <script> qui est la forme simplifié HTML5.

• <td><div align=center>10/23/2015</div></td> mais à quoi te servent les <div>, d'autant qu'un <span> "collerait" mieux, le CSS peut faire la même chose donc inutile de surcharger ton code.

Passons au javascript

Citation:

var dateClean=(date.getDate(),"/",date.getMonth()+1); //cette partie me donne la date sous forme 22/10

est erroné, il aurait fallu écrire var dateClean = date.getDate() + "/" +date.getMonth()+1; la concaténation se fait ainsi.

• Dans la démarche il est préférable de faire des opérations sur des dates, plus facile à comparer et on s'y retrouve mieux et tu l'a bien compris.

• Le parcours des lignes/cellules se fait en utilisant les collection rows des TABLE et cells des TR.

• Pour la date de la cellule on récupère le textContent OU innerText si compatibilité IE<9 requise, on split() et on forme un date pour la comparaison.

• Une méthode qui a fait ses preuves est le clonage et le collage d'un élément dans un autre (copier/coller) ce qui correspond à ton cas. Dans ce cas il te suffit de laisser la <table> réceptrice vide, donc au début on a ce code

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
Prochaine date :
<table>
    <tr>
        <td>Date</td>
        <td>Nom1</td>
        <td>Nom2</td>
        <td>Lieu</td>
    </tr>
</table>
Toutes les dates :
<table>
    <tr>
        <td>Date</td>
        <td>Nom1</td>
        <td>Nom2</td>
        <td>Lieu</td>
    </tr>
    <tr>
        <td>5/10</td>
        <td>Foobar_1</td>
        <td>Foobar_2</td>
        <td>Foobar</td>
    </tr>
    <tr>
        <td>31/10</td>
        <td>Foobar_1</td>
        <td>Foobar_2</td>
        <td>Foobar</td>
    </tr>
    <tr>
        <td>12/11</td>
        <td>Foobar_1</td>
        <td>Foobar_2</td>
        <td>Foobar</td>
    </tr>
</table>

C'est un peu en vrac mais tout doit y être, cela donne par exemple le script suivant

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
// récup. des références aux TABLEs
var oTables = document.getElementsByTagName('TABLE'),
    oTable_1 = oTables[0],
    oTable_2 = oTables[1];
// date pour manipulation
var toDay = new Date(),
    refDay;
// variables utiles
var i,
    cell, cellDate,
    nbLig = oTable_2.rows.length;
// la boucle de récup. de la bonne ligne
for( var i = 1; i < nbLig; i += 1){
  cell = oTable_2.rows[i].cells[0];
  // récupération du contenu
  cellDate = (cell.textContent || cell.innerText).split('/');
  // reInit la date
  refDay = new Date();
  // init de la date
  refDay.setMonth( cellDate[1] -1);
  refDay.setDate ( cellDate[0]);
  // test sur la date
  if( refDay > toDay){
    // clonage et transfert ligne
    oClone = oTable_2.rows[i].cloneNode( true);
    oTable_1.tBodies[0].appendChild( oClone);
    // on quitte
    break;
  }
}

Exemple complet avec le CSS Minimum

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
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Recherche Date</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font-size:100%;
  font: 1em/1.5 Verdana, sans-serif;
}
p {
  margin-bottom:0.5em
}
td {
  width:15%;
  text-align:center;
}
td + td { width:35%;}
td + td +td { width:35%;}
td + td +td +td{ width:15%;}
</style>
</head>
<body>
<p>Prochaine date :</p>
<table>
    <tr>
        <td>Date</td>
        <td>Nom1</td>
        <td>Nom2</td>
        <td>Lieu</td>
    </tr>
</table>
<p>Toutes les dates :</p>
<table>
    <tr>
        <td>Date</td>
        <td>Nom1</td>
        <td>Nom2</td>
        <td>Lieu</td>
    </tr>
    <tr>
        <td>5/10</td>
        <td>Foobar_1</td>
        <td>Foobar_2</td>
        <td>Foobar</td>
    </tr>
    <tr>
        <td>31/10</td>
        <td>Foobar_1</td>
        <td>Foobar_2</td>
        <td>Foobar</td>
    </tr>
    <tr>
        <td>12/11</td>
        <td>Foobar_1</td>
        <td>Foobar_2</td>
        <td>Foobar</td>
    </tr>
</table>
<script>
var oTables = document.getElementsByTagName('TABLE'),
    oTable_1 = oTables[0],
    oTable_2 = oTables[1];
 
var toDay = new Date(),
    refDay;
 
var i,
    cell, cellDate,
    nbLig = oTable_2.rows.length;
 
for( var i = 1; i < nbLig; i += 1){
  cell = oTable_2.rows[i].cells[0];
  // récupération du contenu
  cellDate = (cell.textContent || cell.innerText).split('/');
  // reInit la date
  refDay = new Date();
  refDay.setMonth( cellDate[1] -1);
  refDay.setDate ( cellDate[0]);
  // test sur la date
  if( refDay > toDay){
    // clonage et transfert ligne
    oClone = oTable_2.rows[i].cloneNode( true);
    oTable_1.tBodies[0].appendChild( oClone);
    break;
  }
}
</script>
</body>
</html>

PS: je déplace sur le forum Javascript car bien plus concerné

23/10/2015, 10h53
gisclace

Whaoo, un grand merci à toi !!!! (et un grand merci aussi à Christophe P. bien entendu)

J'ai juste fait une petite modif :

Code:

if( refDay > toDay){

par

Code:

if( refDay >= toDay){

Ça c'est de la grosse modification !!!

Par contre, as-tu une idée du coup du pourquoi sur mon code, quand je faisais

Code:

document.write(dateSplit[1]);

Ça me donnait : 2015< , alors que

Code:

document.write($cell);

me donnait bien 22/10/2015 ?
28/10/2015, 10h17
NoSmoking
Citation:

if( refDay >= toDay){.
Ça c'est de la grosse modification !!!

inutile de par la façon d’initialiser la date à partir de la récupération, en cas de même mois/jour refDay sera toujours supérieure à toDay.
Au passage il te faudra bientôt gérer l'année également.

Citation:

Par contre, as-tu une idée ...

• lors de la récupération on obtient

Code:

innerHTML = '<div align="center">22/10/2015</div>'

• après le "splittage" (ou splittement je ne sais plus) on se retrouve avec
Code:

1 2 3 4 data[0] = '<div align="center">22' data[1] = '10' data[2] = '2015<' data[3] = 'div>'
à l'écriture, via document.write, le résultat sera celui que le navigateur "corrige"
- innerHTML donnera <div align="center">22/10/2015</div> donc affichage de 22/10/2015
- data[0] donnera <div align="center">22</div> donc affichage de 22 centré dans son conteneur
- data[1] donnera 10 donc affichage de 10 simplement
- data[2] donnera 2015< donc affichage de 2015<
- data[3] donnera <div></div> donc affichage de rien !
NB : Si tu ne veux pas de surprise utilise plutôt la console et oublie ~~document.write~~.
28/10/2015, 10h56
gisclace

2 pièce(s) jointe(s)

Bonjour Nosmoking, tout d'abord, merci de prendre le temps de me répondre.

Pour commencer, l'histoire du > et du >= me semble étrange, de mon côté, si je ne mets pas le =, j'ai bien la date suivante et pas celle du jour quand refDay et toDay sont égales.

Avec refDay > toDay

Pièce jointe 191196

Avec refDay >= toDay

Pièce jointe 191197

(je me rends compte en écrivant que j'ai oublié un détail, le tableau 1 doit, soit indiquer la prochaine date supérieure, soit la date du jour si le cas se présente), pour la partie année, je me suis fait la réflexion en finalisant la page, soit je rajouterai l'année (28/10/2015), soit au premier janvier je retirerai toutes les entrées de 2015 (ce qui est plutôt crade), soit je rajoute une casse avec l'année, je demande à vérifier l'année puis la date et je supprime l'affichage des colonnes années (il y a surement d'autres moyens).

Pour la partie split, je ne pensais pas que innerHTML récupérait les balises, mais seulement le contenu (manque de connaissances).

Du coup, tu as répondu en même temps à un point que je trouvais bizarre dans un de mes message précédents :

Citation:

document.write(dateSplit[0]); j'ai : 10 (bizarrement, centré dans la page au passage, mais bon)
29/10/2015, 13h31
NoSmoking

Citation:

...j'ai bien la date suivante et pas celle du jour quand refDay et toDay sont égales.

Effectivement je raisonnais getTime(), qui a peu de chance d'être égal, et non new Date() qui lui peut l'être.