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.

Mise en page horizontale

JavaScript

Vue hybride

Discussions similaires

Partager

Partager