Insertion de ligne par clonage

**Zarkoffe** · 06/06/2019, 10h41

Bonjour à tous,

J'ai le code suivant :

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
<!-- Ci-dessous, le tableau pour ajouter des conditions perso -->    
 
  <button id="add_condition_perso" class="btn btn-success">Ajouter une nouvelle condition personnelle</button>
  <button id="del_condition_perso" class="btn btn-danger">Supprimer</button>
    <table class="table table-bordered table-striped table-condensed">
      <thead>
        <tr>
          <th width="5%"></th>
          <th width="45%">Fournisseur</th>
          <th width="45%">Condition</th>
          <th width="6%"></th>
          <th width="6%"></th>
        </tr>
      </thead>
      <tbody id="table_conditions_perso"></tbody>
    </table>
  <div id="requete_condition_perso"></div>
  <button id="envoi_condition_perso" class="btn btn-primary submit" style="margin: 0 0 5% 85%">Ajouter la condition</button>
 
<!-- add line  -->
<table id="fantome_condition_perso" style="display:none">   
    <tbody>
      <tr>
        <td><input type="checkbox" name="chkbox[]"></td>
        <td>
          <select type="text" class="form-control conditions_perso_fournisseur">
            <?php $list = $bdd->query('SELECT * FROM fournisseur WHERE fournisseur_contact = "'.$_SESSION['Contact_id'].'"');
              while ($data = $list->fetch()) { ?>
            <option value="<?php echo $data['fournisseur_nom']; ?>"> <?php echo $data['fournisseur_nom']; ?></option>
            <?php } $list->closeCursor(); ?>
          </select>
        </td>
        <td><input type="text" class="form-control conditions_perso_condition" /></td>
        <td><input type="text" class="form-control conditions_perso_contact" /></td>
        <td><input type="text" class="form-control conditions_perso_client" /></td>
      </tr>
    </tbody>
  </table>
 
<script>
    // AJOUTER UN ARTICLE DANS LE DEVIS               
    $(document).ready(function()
    {
        var Table_noms_messages = document.getElementById('table_conditions_perso');
    
          const TR_Base = document.querySelector('#fantome_condition_perso tbody tr');
 
 
          $('#add_condition_perso').click(function () {    // "Ajouter un produit"
            var new_tr_clone_condi = TR_Base.cloneNode(true);
            Table_noms_messages.appendChild( new_tr_clone_condi );
 
            //select 2
            $( new_tr_clone_condi ).find("select.form-control").select2({
              width: 'resolve'
            });
          });
    
    $('#del_condition_perso').click(function() {
      try {
        var rowCount = Table_noms_messages.rows.length;
        for(let i=0; i<rowCount; i++) {
          let
            ligneT = Table_noms_messages.rows[i],
            chkbox = ligneT.cells[0].childNodes[0]
          ;
          if(chkbox!=null && chkbox.checked)
          {
            Table_noms_messages.deleteRow(i);
            rowCount--;
            i--;
          }
        }
      }
      catch(e) {
        alert(e);
      }
    });
    //interlocuteur
    $('#envoi_condition_perso').click(function() {
      var params_envoi = {
        conditions_perso_fournisseur: [],
        conditions_perso_condition: [],
        conditions_perso_contact: [],
        conditions_perso_client: []
      };
      $(".conditions_perso_fournisseur").each(function() { params_envoi.conditions_perso_fournisseur.push( $(this).val()); });
      $(".conditions_perso_condition").each(function() { params_envoi.conditions_perso_condition.push( $(this).val()); });
      $(".conditions_perso_contact").each(function() { params_envoi.conditions_perso_contact.push( $(this).val()); });
      $(".conditions_perso_client").each(function() { params_envoi.conditions_perso_client.push( $(this).val()); });
 
      $("#requete_condition_perso").load("../PHP/insert/condition_perso.php", params_envoi );
      console.log( params_envoi );  
    });
  });
 
  $(document).ready(function() {
    $('#data_conditions').DataTable();
  });
</script>

Concrètement, je clique sur le bouton id="add_condition_perso" et cela ajoute une ligne, puis 2 si je reclique, etc.
Je remplis ces lignes, et je les inserts en BDD.
Mon problème : l'insertion se fait bien, mais une ligne vide s'insert à chaque fois en trop :
Nom : Capture d’écran de 2019-06-06 10-31-17.png
Affichages : 125
Taille : 6,4 Ko

Nom : Capture d’écran de 2019-06-06 10-31-17.png
Affichages : 125
Taille : 6,4 Ko

Ici, j'ai ajouté une seule ligne. Et pourtant le système m'en créé une autre, vide, et l'insert donc aussi.
Je n'ai pas déposé mon code d'insertion en BDD car le pb ne vient pas de là mais du code que je viens de déposer.
En effet, si j'échange de place le code du <thead> (ligne 1 à 20) avec celui du <tbody>( 21 à 39), j'ai aussi une ligne en trop... mais en première position cette fois:
Nom : Capture d’écran de 2019-06-06 10-39-21.png
Affichages : 155
Taille : 6,2 Ko

Nom : Capture d’écran de 2019-06-06 10-39-21.png
Affichages : 155
Taille : 6,2 Ko

Si vous avez une idée...merci d'avance!

**Toufik83** · 06/06/2019, 19h38

Salut,

Quand tu clones un élément, javascript copie aussi les attributs de cet élément (classes,id,data-xxx...).

La solution la plus courte est d'ajouter le id "#table_conditions_perso" dans les sélecteurs comme ça :

Code :

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

1
2
3
4
5
 
$("#table_conditions_perso .conditions_perso_fournisseur").each(...);
$("#table_conditions_perso .conditions_perso_condition").each(...);
$("#table_conditions_perso .conditions_perso_contact").each(...);
$("#table_conditions_perso .conditions_perso_client").each(...);

**SpaceFrog** · 07/06/2019, 08h48

un .each() sur un id ???

**Zarkoffe** · 07/06/2019, 09h16

Bonjour @Toufik83, merci pour ta réponse, en effet cela fonctionne parfaitement à présent.

J'ai bien lu tes explications, cependant je n'ai pas tout à fait saisie pourquoi j'avais une ligne vide alors que je n'en avais créé qu'une seule.
Pourrais-tu me clarifier ceci? Merci

@Spacefrog en effet je devrais plutôt utiliser une classe comme je passe plusieurs fois sur mon même élément. Merci

**Toufik83** · 07/06/2019, 16h15

Salut,
La ligne vide dont tu parles c'est les valeurs des input qui sont dans le tableau #fantome_condition_perso :

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
<table id="fantome_condition_perso" style="display:none">   
    <tbody>
      <tr>
        <td><input type="checkbox" name="chkbox[]"></td>
        <td>
          <select type="text" class="form-control conditions_perso_fournisseur">
            ....
          </select>
        </td>
        <td><input type="text" class="form-control conditions_perso_condition" /></td>
        <td><input type="text" class="form-control conditions_perso_contact" /></td>
        <td><input type="text" class="form-control conditions_perso_client" /></td>
      </tr>
    </tbody>
  </table>

On a ajouté un id #table_conditions_perso dans les sélecteurs pour ne récupérer que les valeurs des inputs qui existent dans :

Code HTML :

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

<tbody id="table_conditions_perso"></tbody>

SpaceFrog, comme il peut avoir plusieurs éléments ayant la même classe dans le même conteneur, son html peut devenir comme ça :

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
<tbody id="table_conditions_perso">
     <tr>
        <td><input type="checkbox" name="chkbox[]"></td>
        <td>
          <select type="text" class="form-control conditions_perso_fournisseur"></select>
        </td>
        <td><input type="text" class="form-control conditions_perso_condition" /></td>
        <td><input type="text" class="form-control conditions_perso_contact" /></td>
        <td><input type="text" class="form-control conditions_perso_client" /></td>
    </tr>
 
    <tr>
        <td><input type="checkbox" name="chkbox[]"></td>
        <td>
          <select type="text" class="form-control conditions_perso_fournisseur"></select>
        </td>
        <td><input type="text" class="form-control conditions_perso_condition" /></td>
        <td><input type="text" class="form-control conditions_perso_contact" /></td>
        <td><input type="text" class="form-control conditions_perso_client" /></td>
    </tr>
 
    <tr>
        <td><input type="checkbox" name="chkbox[]"></td>
        <td>
          <select type="text" class="form-control conditions_perso_fournisseur"></select>
        </td>
        <td><input type="text" class="form-control conditions_perso_condition" /></td>
        <td><input type="text" class="form-control conditions_perso_contact" /></td>
        <td><input type="text" class="form-control conditions_perso_client" /></td>
    </tr> ......
</tbody>

**SpaceFrog** · 07/06/2019, 16h28

Au temps pour moi ...

je n'avais pas vu qu'il y avait une class après l'id

Insertion de ligne par clonage

jQuery

Vue hybride

Discussions similaires

Partager

Partager