Mise en page horizontale

**octaw** · 21/03/2018, 16h41

Merci pour le code.
Voir discussion Ajouter des champs dynamiquement.
Je suis débutant en javascript, comment avoir une mise en page horizontale : champ1 - champ 2 - champ 3 - champ 4 - ajout - suppression J'espère ne pas abuser. Merci

**eleydet** · 22/03/2018, 09h25

Bonjour,

Je ne suis pas certain d'avoir bien compris la question posée. Que pensez-vous du code ci-dessous?

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
<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex { display: flex; }
      .flex > div {
        padding: 1em;
        flex: 1 1 auto;
        width: 25%;
        transition: width 0.7s;
       }
       .flex > div:nth-child(1) { background: #a3a; }
       .flex > div:nth-child(2) { background: #3a3; }
       .flex > div:nth-child(3) { background: #aa3; }
       .flex > div:nth-child(4) { background: #33a; }
       .flex > div:hover { width: 70%; }
    </style>
  </head>
  <body>
    <div class="flex"><div>Un</div><div>Deux</div><div>Trois</div><div>Quatre</div>
  </div>
 </body>
</html>

**octaw** · 23/03/2018, 16h42

Bonjour, je dois être plus précis : j'ai besoin que l'internaute puisse saisir un planning de rendez-vous.
Ex :
DATE DUREE POINTAGE REMARQUE
01/01/2018 1h Oui Ras Insérer Suppression
01/02/2018 1h30 Oui Ras Insérer Suppression
01/04/2018 1h Insérer Suppression
01/05/2018 2h Ajout Suppression

SOUMETTRE (pour enregistrer le planning de rendez-vous dans une base mysql)

Insérer : permet d'insérer une ligne de rendez-vous à la ligne en-dessous
Ajout : permet d'ajouter une ligne de rendez-vous à la dernière ligne
Suppression : permet de supprimer une ligne de rendez-vous à condition que le rendez-vous n'est pas eu lieu (pointage != oui)

Le planning de rendez-vous démarre à 0 ligne, l'internaute ajoute, inséré et supprime des lignes de rendez-vous

**eleydet** · 23/03/2018, 21h58

Bonsoir,

Il vous faut apprendre à manipuler le DOM. Exemple de 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function suppr(ligne_a_sup) {
        ligne_a_sup.parentNode.removeChild(ligne_a_sup);
      }
      function ajout(ligne_a_ins) {
        balise=document.createElement("TR");
        balise.innerHTML='<td>Autre ligne</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td>';
        ligne_a_ins.parentNode.insertBefore(balise,ligne_a_ins);
      }
    </script>
  </head>
  <body>
    <table border="1">
      <tr><td>Ligne 1</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr>
      <tr><td>Ligne 2</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr>
      <tr><td>Ligne 3</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr>
      <tr><td>Ligne 4</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr>
      <tr><td>Ligne 5</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr>
    </table>
  </body>
</html>

**octaw** · 28/03/2018, 19h34

Bonsoir,
Effectivement, j'ai beaucoup de mal avec le DOM.
J'ai avancé à partir de ton code en ajoutant la récupération des données saisies dans des tableaux, j'ai mis le code en pièce jointe : je ne trouve pas comment le mettre dans une fenêtre comme toi.
Il me reste un problème : dans un planning, il y aura des nouvelles lignes de rendez-vous et des anciennes lignes du planning déjà sauvées dans la table mysql, donc possédant un Id. Lorsque l'internaute supprime une nouvelle ligne qu'il vient de créer, c'est bon. Lorsque l'internaute supprime une ligne déjà existante dans la table, je dois après validation du formulaire supprimer la ligne de rendez-vous dans la table des rendez-vous à partir de son Id. L'idée est d'ajouter un input caché par ligne avec son Id s'il existe, et de le récupérer lors de la suppression de la ligne pour traitement ultérieur. Mais je cale

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function suppr(ligne_a_sup) {
                ligne_a_sup.parentNode.removeChild(ligne_a_sup);
      }
      
                function ajout(ligne_a_ins) {
        balise=document.createElement("TR");
        balise.innerHTML='<td><input type="text" name="date[]" /></td>';
                balise.innerHTML+='<td><input type="text" name="heure[]" /></td>';
                balise.innerHTML+='<td><input type="text" name="duree[]" /></td>';
                balise.innerHTML+='<td style="text-align: center;"><select name="pointage_stg[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td>';
                balise.innerHTML+='<td><input type="text" name="remarque_stg[]" /></td>';
                balise.innerHTML+='<td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td>';
                balise.innerHTML+='<td><input type="text" name="remarque_formateur[]" /></td>';
                balise.innerHTML+='<td onclick="suppr(this.parentNode);">Supprimer</td>';
                balise.innerHTML+='<td onclick="ajout(this.parentNode);">Ins&eacute;rer</td>';
        ligne_a_ins.parentNode.insertBefore(balise,ligne_a_ins);
      }
    </script>
 
  </head>
 
  <?php
  if (isset($_POST["valide"]))
  {
        var_dump($_POST);
  }
  else
  {
        echo '
  
   
  <body>
        <form method="post" action="formulaire_dynamique_forum.php" name="formulaire">
    <table border="1">
                        <tr><td>DATE</td><td>HEURE</td><td>DUR&Eacute;E</td><td>POINTAGE STAGIAIRE</td><td>REMARQUE STAGIAIRE</td><td>POINTAGE FORMATEUR</td><td>REMARQUE FORMATEUR</td></td>
                  <tr><td> <input type="text" name="date[]"/></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                  <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option>
           <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td>
                        <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="non">Non</option><option value="oui">Oui</option></select></td><td><input type="text" name="remarque_formateur[]" /></td>
                        <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td></tr>
                  <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                  <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option>
           <option value="non">Non</option></select></td></td><td><input type="text" name="remarque_stg[]" /></td>
                        <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td>
                        <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td></tr>
                  <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                  <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option>
           <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td>
                        <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td>
                        <td onclick="suppr(this.parentNode");">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td></tr>
                  <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                  <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option>
           <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td>
                        <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td>
                        <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td></tr>
                  <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                  <td style="text-align: center;"><select name="pointage_stg[]" > <option value="non">Non</option>
           <option value="oui">Oui</option></select></td><td><input type="text" name="remarque_stg[]" /></td>
                        <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select><td><input type="text" name="remarque_formateur[]" /></td>
                        <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td></tr>
                </table>
                <button type="submit" value="envoyer" name="valide"><img src="img9.png" alt="valider" height="25" width="25" /></button>
                </form>';
        }
         ?>
</body>
</html>

**eleydet** · 28/03/2018, 20h35

Bonsoir,

Le projet suivant semble ressembler à ce que tu programmes :
http://cherbe.free.fr/cyber_agenda.html
C'est un projet très ancien, il faudra adapter et rafraîchir le code. Il présente l'avantage d'être assez simple à comprendre.

**octaw** · 03/04/2018, 18h37

Bonjour,
J'ai trouvé une solution facile,

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
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
    function suppr(ligne_a_sup)
        {
                ligne_a_sup.parentNode.removeChild(ligne_a_sup);
        }
      
        function ajout(ligne_a_ins)
        {
                balise=document.createElement("TR");
        balise.innerHTML='<td><input type="text" name="date[]" /></td>';
                balise.innerHTML+='<td><input type="text" name="heure[]" /></td>';
                balise.innerHTML+='<td><input type="text" name="duree[]" /></td>';
                balise.innerHTML+='<td style="text-align: center;"><select name="pointage_stg[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td>';
                balise.innerHTML+='<td><input type="text" name="remarque_stg[]" /></td>';
                balise.innerHTML+='<td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td>';
                balise.innerHTML+='<td><input type="text" name="remarque_formateur[]" /></td>';
                balise.innerHTML+='<td><input type="hidden" name="id_table[]" value=0 /></td>';
                balise.innerHTML+='<td onclick="suppr(this.parentNode);">Supprimer</td>';
                balise.innerHTML+='<td onclick="ajout(this.parentNode);">Ins&eacute;rer</td>';
                ligne_a_ins.parentNode.insertBefore(balise,ligne_a_ins);
        }
    </script>
  </head>
 
 
  <?php
  
  if (isset($_POST["valide"]))
  {
        // traitement du formulaire saisi
        var_dump($_POST);
        $list_id_initiaux = explode("-", $_POST["id_table_des_rendez_vous"]);   // mise en tableau de la chaîne de caractères comportant les id de la table des rendez-vous
        echo 'tableau des id initiaux';
        var_dump($list_id_initiaux);
        /*
                - les lignes de rendez-vous avec un id = 0 dans id_table[] sont des nouveaux rendez-vous à créer dans la table des rendez-vous 
                - les lignes de rendez-vous avec un id > 0 dans id_table[] sont des rendez-vous qui existaient déjà dans la table des rendez-vous, et sont donc à mettre à jour dans cette table. 
                - les id existant dans $list_id_initiaux et n'existant plus dans id_table[], ont été supprimés du planning, et sont donc à supprimer de la table des rendez-vous
        */
  }
  else
  {
        // création de la liste des id correspondant à chaque ligne de rendez-vous déjà existante dans la table des rendez-vous, suite à l'exécution de la requête de chargement des lignes de rendez-vous déjà existantes
        // ici établissement d'une liste manuelle pour l'exemple: elle est transmise dans le $_POST en la mettant sous forme cachée dans le formulaire
        $list_id_table = "125-745-2658-100-5000";               
        
        echo '
     
  <body>
        <form method="post" action="formulaire_dynamique_forum.php" name="formulaire">
                <table border="1">
                        <tr>
                                <td>DATE</td><td>HEURE</td><td>DUR&Eacute;E</td><td>POINTAGE STAGIAIRE</td><td>REMARQUE STAGIAIRE</td><td>POINTAGE FORMATEUR</td><td>REMARQUE FORMATEUR</td><td></td><td>supp</td><td>ins</td>
                        </tr>
                        <tr>
                                <td> <input type="text" name="date[]"/></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                                <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option>
                                <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td>
                                <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="non">Non</option><option value="oui">Oui</option></select></td><td><input type="text" name="remarque_formateur[]" /></td>
                                <td><input type="hidden" name="id_table[]" value=125 /></td>
                                <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td>
                        </tr>
                        <tr>
                                <td><input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                                <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option>
                                <option value="non">Non</option></select></td></td><td><input type="text" name="remarque_stg[]" /></td>
                                <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td>
                                <td><input type="hidden" name="id_table[]" value=745 /></td>
                                <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td>
                        </tr>
                        <tr>
                                <td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                                <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option>
                                <option value="non">Non</option></select></td></td><td><input type="text" name="remarque_stg[]" /></td>
                                <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td>
                                <td><input type="hidden" name="id_table[]" value=2658 /></td>
                                <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td>
                        </tr>
                  <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                  <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option>
           <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td>
                        <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td>
                        <td><input type="hidden" name="id_table[]" value=100 /></td>
                        <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td></tr>
                  <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td>
                  <td style="text-align: center;"><select name="pointage_stg[]" > <option value="non">Non</option>
           <option value="oui">Oui</option></select></td><td><input type="text" name="remarque_stg[]" /></td>
                        <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select><td><input type="text" name="remarque_formateur[]" /></td>
                        <td><input type="hidden" name="id_table[]" value=5000 /></td>
                        <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Ins&eacute;rer</td></tr>
                </table>
                <button type="submit" value="envoyer" name="valide"><img src="img9.png" alt="valider" height="25" width="25" /></button>
                <input type="hidden" name="id_table_des_rendez_vous" value="' . $list_id_table . '" />
        </form>';
        }
        
        ?>
</body>
</html>

Il y aurait encore une amélioration à apporter : dans cette exemple, même les lignes du planning déjà existantes dans la table des rendez-vous, et non vraiment modifiées dans le formulaire, seront mises à jour dans la table des rendez-vous par une requête. Ce qui charge le serveur inutilement.

Grand Merci Eleydet pour ton apport déterminant

**octaw** · 06/04/2018, 11h30

Bonjour,
J'ai encore un pb avec le DOM que je peine vraiment à comprendre :
- je voudrais empêcher la suppression d'une ligne qui est pointée (= rendez-vous déjà réalisé) par le stagiare ou le formateur. Donc lors de l'appui sur un bouton "supprimer", comment lire le contenu de pointage stagiaire ou pointage formateur de la même ligne.
- je voudrais empêcher la modification d'une date d'une ligne déjà pointée : donc à partir du champ date en cours de modif., aller lire les 2 champs de pointage de la même ligne.

J'espère ne pas abuser

**NoSmoking** · 06/04/2018, 12h01

Bonjour,

je voudrais empêcher la suppression d'une ligne qui est pointée (= rendez-vous déjà réalisé)

dans ce cas ne mets pas de <button> !

**octaw** · 06/04/2018, 18h03

Effectivement, ça semble jouable :
- facile et efficace

- transposable pour les dates : s'il existe un pointage dans la même ligne, pas de input de la date mais seulement un affichage de la date

- si l'utilisateur veut vraiment supprimer une ligne pointée, alors il dépointe, sauve dans la table, recharge le planning, et supprime la ligne. Idem pour une modification de date : fonctionnellement, cela se plaide auprès du client

Une petite dernière : comment éviter que l'utilisateur saisisse 2 dates de rendez-vous identiques sur 2 lignes différentes ?
Une piste : j'ai regardé comment passer le tableau php date[] dans la fonction javascript verif_date() à partir de

Code html :

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

<input type="text" name="date[]" onchange="verif_date(this.value)" />

pour vérifier si this.value existe déjà dans date[], mais sans parvenir à transposer date[] en javascript

Mise en page horizontale

JavaScript

Discussions similaires

Partager

Partager