Contenu d'un tableau suivant date

**gisclace** · 20/10/2015, 16h55

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.

**Christophe P.** · 21/10/2015, 12h09

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.

**gisclace** · 21/10/2015, 13h41

Merci pour la réponse, je vois donc que c'est possible.
Pour le moment mon code est simplement comme suit :

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
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.

**Christophe P.** · 21/10/2015, 15h54

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

**gisclace** · 21/10/2015, 17h01

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.

**Christophe P.** · 21/10/2015, 17h41

Cela me semble être ça. Si les dates du tableau 2 ne sont pas dans l'ordre, il faut toutes les parcourir.

**NoSmoking** · 21/10/2015, 17h52

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.

**gisclace** · 22/10/2015, 11h20

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

)

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

Code :

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

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

**gisclace** · 22/10/2015, 14h59

J'avance j'avance !!!!

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

Voici mon code à jour :

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
<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 ?

**Christophe P.** · 22/10/2015, 15h44

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 :

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

1
2
var dateSplit = $cell.split('/');
var maDate = new Date(dateSplit[2], dateSplit[1], dateSplit[0]);

Édition : correction du code (tableau avec crochet).

**gisclace** · 22/10/2015, 16h10

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...

**Christophe P.** · 22/10/2015, 16h19

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 ?

**gisclace** · 22/10/2015, 16h24

La ligne est toute bête :

Code :

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

<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 :

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

document.write(dateSplit[2]);

Par contre, quand je fais :

Code :

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

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

**Christophe P.** · 22/10/2015, 16h32

Là, je sèche.

N'oublie pas de mettre la balise CODE pour le code, c'est plus lisible.

**gisclace** · 22/10/2015, 16h35

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

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.

**Christophe P.** · 22/10/2015, 17h12

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.

**gisclace** · 22/10/2015, 17h34

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.

Bon étape suivante, faire la boucle.

Je place le code propre en l'état :

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
<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)

**gisclace** · 22/10/2015, 18h04

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é

**NoSmoking** · 22/10/2015, 19h19

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

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 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
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 javascript :

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
// 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 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
<!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>