Gestion de dates et nombre de jours dans un tableau

Version imprimable

29/11/2016, 00h28
Décibel

Gestion de dates et nombre de jours dans un tableau

Bonjour,

Pas du tout doué en javascript, je cherche une fonction simple qui permet de calculer pour n lignes le nombre de jours entre la date d’arrivée et la date de départ.

Date d’arrivée 1 | Date départ 1 | Nbr de jour 1
Date d’arrivée 2 | Date départ 2 | Nbr de jour 2
Date d’arrivée 3 | Date départ 3 | Nbr de jour 3
Date d’arrivée 4 | Date départ 4 | Nbr de jour 4

J'ai cherché un peu partout sans trouver, merci pour votre aide !

L’objet Date est capable d’interpréter un certain nombre de formats. Exemple :

Code:

new Date('2016-11-29')

La difficulté dans ton cas sera principalement d’extraire les informations du tableau.

Une fois que tu as deux objets Date, par exemple :
Code:

1 2 var date1 = new Date(cell1.textContent); var date2 = new Date(cell2.textContent);
(je reste volontairement vague sur la façon d’obtenir ces variables cell1 et cell2, références sur tes cellules de tableaux),
tu peux simplement faire la soustraction entre les deux dates, et tu obtiendras une durée en millisecondes. Divise par 1000 pour avoir des secondes, puis par 60 pour des minutes, etc.
Si la durée que tu obtiens est négative, c’est que la date d’arrivée est antérieure à la date de départ. Pour ignorer ce cas tu peux comparer à 0 et multiplier par -1 quand nécessaire, ou bien utiliser Math.abs.

Pour obtenir des références sur tes cellules de tableaux, utilise d’abord une méthode de sélection du DOM (getElementById, querySelector ou autre) pour avoir une référence sur le tableau, puis utilise sa propriété rows, et pour chaque row itère sur la propriété cells de ce dernier.

En code :
Code:

1 2 3 4 5 6 7 8 var tableau = … ; for (var i = 0, nRows = tableau.rows.length; i < nRows; i++) { var row = tableau.rows[i]; for (var j = 0, nCells = row.cells.length; j < nCells; j++) { var cell = row.cells[j]; … } }
En bonus, la version ES6 :
Code:

1 2 3 4 5 6 let tableau = … ; for (let row of tableau.rows) { for (let cell of row.cells) { … } }
Voilà l’idée générale, à toi de broder à partir de ça.

L’autre solution, si tu ne veux pas itérer sur toutes les cellules de chaque ligne, c’est d’ajouter des classes aux cellules qui t’intéressent, et de les sélectionner par leurs classes, au moyen de querySelector ou getElementsByClassName.

Merci pour ta réponse, mais désolé je ne comprends rien, pas assez doué en javascript pour en faire quoi que ce soit...
Si tu as 5 mn de plus pour écrire quelque chose de plus précis, je t'en serais reconnaissant, ou si tu connais un tuto dispo ?

Mon tableau est ainsi

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table id="matable">
      <tr>
        <td class="centrer">Nombre </td>
        <td class="centrer">Date d arrivée</td>
        <td class="centrer">Date de départ</td>
        <td class="centrer">Nbr de jour</td>
        <td class="centrer">Prix par jour</td>
        <td class="centrer">Total €</td>
        <td class="centrer"><a href="#bas" onclick="AddOneRow()">+</a></td>
      </tr>
      <tr>
        <td class="centrer"><input type="text" name="nbchevaux[1]" class="cent0" id="nbchevaux[1]"></td>
        <td class="centrer"><input type="text" name="datearrive[1]" class="cent0" id="datearrive[1]"></td>
        <td class="centrer"><input type="text" name="datedepart[1]" class="cent0" id="datedepart[1]"></td>
        <td class="centrer"><input type="text" name="nbjour[1]" class="cent0" id="nbjour[1]"></td>
        <td class="centrer"><input type="text" name="prix[1]" class="cent0" id="prix[1]"></td>
        <td class="centrer"><input type="text" name="totalchevaux[1]" class="cent0" id="totalchevaux[1]"></td>
        <td class="centrer"><a href="#bas" onclick="AddOneRow()">+</a></td>
      </tr>
  </table>

29/11/2016, 14h37
zehle

Il a bien expliqué.
Il te faut peut être lire quelques documentation pour JavaScript, on ne peut pas faire tes exercices à ta place, on ne peut que t'orienter.

Ok donc en fait tu as des input. On va donc utiliser value plutôt que textContent.

Première remarque : les attributs name et id sont incorrects. La syntaxe crochets est valable pour name à condition que les crochets soient vides :

Code:

<input … name="nbchevaux[]" … >

Mais ça n’est utile que si ces input sont dans un <form> et si tu utilises ce form pour envoyer des informations au serveur.

Quant aux id, pas le droit aux caractères spéciaux, tu dois générer une chaîne à partir du numéro de la ligne, par exemple nbchevaux1 ou nbchevaux_1. Tu feras ça dans la fonction AddOneRow, mais on verra ça plus tard.

Puisque tous tes input sont nommés, on peut accéder à chacun séparément, donc pas besoin d’itérer sur les cellules de la ligne. En revanche, on a toujours besoin d’itérer sur les lignes. Tu auras donc une boucle for comme ceci :
Code:

1 2 3 4 5 var matable = document.querySelector('#matable'); for (var i = 0, nRows = matable.rows.length; i < nRows; i++) { var row = matable.rows[i]; … }
(Par souci de cohérence je vais utiliser querySelector partout.)

Ensuite tu récupères des références sur les input à manipuler :
Code:

1 2 3 var inputArrivee = row.querySelector('input[name="datearrive[]"]'); var inputDepart = row.querySelector('input[name="datedepart[]"]'); var inputNbjour = row.querySelector('input[name="nbjour[]"]');
Ou alors, utilise les id une fois que tu les auras corrigés.

Et enfin tu manipules le contenu de ces input avec leur attribut value.
Code:

1 2 3 var dateArrivee = new Date(inputArrivee.value); … inputNbjour.value = … ;
Pour le reste, réfère-toi à ce que je t’ai dit dans mon précédent post ;)

29/11/2016, 19h34
Décibel

Citation:

Mais ça n’est utile que si ces input sont dans un <form> et si tu utilises ce form pour envoyer des informations au serveur.

Ben oui, c'est la cas d'autant que si tu regardes la tables il est possible d'ajouter une ligne et des input servent à envoyer des données...

Mais tout ton code m'aide plus !
Je vais essayer, si je trouve la solution je viendrais la mettre ici !!
Merci pour ton aide !

Une question, vu qu'il faut que je laisse les crochets, ça marche quand même ?

Je viens de faire des tests, effectivement on peut mettre des chiffres entre les crochets. J’ai appris un truc grâce à toi, merci :D
Par contre faut faire attention à ne pas écraser des valeurs accidentellement.

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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Input names avec des chiffres entre les crochets</title>
</head>
<body>
 
<form>
  <p>
    Test A&nbsp;:
    <input name="testA[1]" value="poney">
    <input name="testA[3]" value="papillon">
    <input name="testA[]"  value="licorne">
  </p>
  <p>
    Test B&nbsp;:
    <input name="testB[42]" value="pomme">
    <input name="testB[42]" value="banane">
    <input name="testB[42]" value="orange">
  </p>
  <p>
    Test C&nbsp;:
    <input name="testC[]"  value="over">
    <input name="testC[0]" value="nine">
    <input name="testC[]"  value="thousands">
  </p>
  <p>
    <input type="submit">
  </p>
</form>
 
<?php var_dump($_GET); ?>
 
</body>
</html>

C'est cool, je suis heureux de t'avoir permis de voir ça...
Avec une petite boucle on récupère les données et hop dans la base !
Code:

1 2 3 4 5 6 foreach ($_POST['test1'] as $k => $v) { $test1= mysqli_real_escape_string( $mysql ,$_POST['test1'][$k]); $test2= mysqli_real_escape_string( $mysql ,$_POST['test2'][$k]); $test3= mysqli_real_escape_string( $mysql ,$_POST['test3'][$k]); $test4= mysqli_real_escape_string( $mysql ,$_POST['test4'][$k]); }
Bon je n'arrive pas à faire la fonction en javascript... sniff