Discussion :

[STEF68600]

Bonjour a tous,

je recherche comment modifier la valeur "idtable[]" lors du clonage d'une ligne de tableau.
De manière à pouvoir distinguer une nouvelle ligne d'une ligne déja existante pour ensuite faire un INSERT ou UPDATE dans un BDD suivant le cas.
sachant que je ne peux pas me fier à la dernière ligne insérer car je peux en supprimer ou en ajouter a volonté.

Ma dernière tentative est avec la fonction SPLICE, mais ça fonctionne pas.

Merci de votre aide, car la je tourne en rond dans mon bocal...

mon code js :

Code javascript :

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

1
2
3
4
5
function clone(line){
    newLine = line.cloneNode(true);
    newLine.splice(0,1 ,"");
    line.parentNode.appendChild(newLine);
}

code html concerné :

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
    <tr>
      <td visibility: hidden ><input name="idtable[]" type="text" placeholder="" Value= "<?php echo $row['ID']?>"></td>
      <td><input class="in0" name="contrat[]" type="text" placeholder="N° de contrat" Value= "<?php echo $row['CONTRAT']?>" required></td>
      <td><input class="in0" name="reference[]" type="text" placeholder="référence fabricant" Value= "<?php echo $row['REFERENCE']?>" required></td>
      <td><select name="status[]" required>
				    <option <?php if($row['STATUS'] == ""){echo 'selected="selected"';} ?> value="" >Veuillez Choisir</option>
            <option <?php if($row['STATUS'] == "En cours"){echo 'selected="selected"';} ?> value="En cours">En cours</option>
            <option <?php if($row['STATUS'] == "Clos"){echo 'selected="selected"';} ?> value="Clos">Clos</option>
          </select></td>
      <td><input class="in0" name="date_debut[]" type="date" placeholder="date de debut contrat" Value= "<?php echo $row['DATE DE DEBUT']?>" required></td>
      <td><input class="in0" name="date_fin[]" type="date" placeholder="date de fin contrat" Value= "<?php echo $row['DATE DE FIN']?>" required></td>
      <td><select name="renouvele[]" required>
				    <option <?php if($row['RENOUVELE'] == ""){echo 'selected="selected"';} ?> value="" >Veuillez Choisir</option>
            <option <?php if($row['RENOUVELE'] == "Oui"){echo 'selected="selected"';} ?>value="OUI">Oui</option>
            <option <?php if($row['RENOUVELE'] == "Non"){echo 'selected="selected"';} ?>value="NON">Non</option>
          </select></td>
      <td><select name="unite_vente[]" required>
				    <option <?php if($row['UNITES DE VENTE'] == ""){echo 'selected="selected"';} ?>value="" >Veuillez Choisir</option>
            <option <?php if($row['UNITES DE VENTE'] == "Points"){echo 'selected="selected"';} ?> value="Points">Points</option>
            <option <?php if($row['UNITES DE VENTE'] == "Euros"){echo 'selected="selected"';} ?>value="Euros">Euros</option>
          </select></td>
      <td><input class="in0" name="contact[]" type="text" placeholder="contact client" Value= "<?php echo $row['CONTACT']?>"></td>
      <td><input class="in0" name="mail[]" type="text" placeholder="mail du client" Value= "<?php echo $row['MAIL CONTACT']?>"></td>
      <td><input class="in0" name="telephone[]" type="text" placeholder="télephone du client" Value= "<?php echo $row['TELEPHONE']?>"></td>
      <td><input class="in0" name="solde[]" type="text" placeholder="Solde de Points" Value= "<?php echo $row['SOLDE']?>"></td>
      <td visibility: hidden ><input name="compte_soon_D[]" type="text" placeholder="" Value= "<?php echo $row['COMPTE SOON']?>"></td>
      <td>
        <img src="../images/buttonplus.png" style="width: 32px; height:32px;" class="btnplus" name="select" onclick="clone(this.parentNode.parentNode)"/>
        <img src="../images/buttonremove.png" style="width: 32px; height:32px;" class="btnplus" name="select" onclick="remove(this.parentNode.parentNode)"/>
      </td>
      </tr>

[mathieu]

pour modifier un attribut en javascript, vous pouvez utiliser cela :
https://developer.mozilla.org/fr/doc...t/setAttribute

[STEF68600]

Bonjour Mathieu,
pour cette réponse.
Je comprend bien la fonction setAttribute(). Enfin je pense car je suis une bille en JS...
par contre je n'arrive pas l'exploiter ou la placer au bon endroit.

mon code JS :

Code javascript :

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

1
2
3
4
5
6
7
8
9
function clone(line){
  newLine = line.cloneNode(true);
 
  newLine.setAttribute("idtable","news valeur");
  //newLine.setAttribute("idtable[]","news valeur");
  //newLine.setAttribute("idtable"[newLine.rowIndex],"news valeur");
 
  line.parentNode.appendChild(newLine); 
}

merci de votre aide.

[mathieu]

qu'est ce que vous voyez comme résultat dans la console de développement avec ce code ?

[STEF68600]

ça me crée un nouveau bien une ligne complète identique , mais il crée dans le <Tr avec un attribut idtable="news valeur".

Moi ce que j'aurais besoin c'est une fonction qu'il remplace value="978" de l'input name="idtable[]" par value="news valeur" a la création du clonage.

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
<tr idtable="news valeur">
                      <td visibility:="" hidden=""><input name="idtable[]" type="text" placeholder="" value="978"></td>
                      <td><input class="in0" name="contrat[]" type="text" placeholder="N° de contrat" value="A21NS088935" required=""></td>
                      <td><input class="in0" name="reference[]" type="text" placeholder="référence fabricant" value="FSACSAOTEWRT001" required=""></td>
                      <td><select name="status[]" required="">
                          <option value="">Veuillez Choisir</option>
                          <option value="En cours">En cours</option>
                          <option selected="selected" value="Clos">Clos</option>
                        </select></td>
                      <td><input class="in0" name="date_debut[]" type="date" placeholder="date de debut contrat" value="2022-01-01" required=""></td>
                      <td><input class="in0" name="date_fin[]" type="date" placeholder="date de fin contrat" value="2022-07-01" required=""></td>
                      <td><select name="renouvele[]" required="">
                          <option value="">Veuillez Choisir</option>
                          <option value="OUI">Oui</option>
                          <option selected="selected" value="NON">Non</option>
                        </select></td>
                      <td><select name="unite_vente[]" required="">
                          <option value="">Veuillez Choisir</option>
                          <option value="Points">Points</option>
                          <option selected="selected" value="Euros">Euros</option>
                        </select></td>
                      <td><input class="in0" name="contact[]" type="text" placeholder="contact client" value=""></td>
                      <td><input class="in0" name="mail[]" type="text" placeholder="mail du client" value=""></td>
                      <td><input class="in0" name="telephone[]" type="text" placeholder="télephone du client" value=""></td>
                      <td><input class="in0" name="solde[]" type="text" placeholder="Solde de Points" value=""></td>
                      <td visibility:="" hidden=""><input name="compte_soon_D[]" type="text" placeholder="" value=""></td>
                      <td>
                        <img src="../images/buttonplus.png" style="width: 32px; height:32px;" class="btnplus" name="select" onclick="clone(this.parentNode.parentNode)">979                        <img src="../images/buttonremove.png" style="width: 32px; height:32px;" class="btnplus" name="select" onclick="remove(this.parentNode.parentNode)">
                      </td>
                    </tr>

[NoSmoking]

Bonjour,

ça me crée un nouveau bien une ligne complète identique , mais il crée dans le <Tr avec un attribut idtable="news valeur".

c'est conforme a ce que tu demandes en écrivant :

newLine.setAttribute("idtable","news valeur");

Si tu veux modifier l'attribut value de l'élément <input name="idtable[]">alors c'est lui qu'il faut que tu cibles

Code :

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

1
2
const elemInput = newLine.querySelector("[name='idtable[]']");
elemInput.setAttribute("value", "news valeur");

[STEF68600]

TOP !
Merci ça fonctionne et j'aurais pas trouvé car j'avais pas assimilé le fait d'isoler un élément.

si j'ai bien compris querySelector sert a isoler un élément de la structure newLine.
On l'enregistre dans la constante elemInput.
enfin on attribue la valeur par setAttribute sur l'élément isolé en l'occurrence là "[name='idtable[]']"

[NoSmoking]

si j'ai bien compris

c'est exactement cela mais en cas de doute il ne faut pas hésiter à consulter la documentation comme par exemple MDN comme par exemple Element.setAttribute().

Pendant que l'on y est les fonctions ajout/suppression de lignes pourraient être simplifiées comme suit :
appel à celles-ci

Code html :

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

1
2
<img src="../images/buttonplus.png"   onclick="appendLigne(this)"  alt="+" >
<img src="../images/buttonremove.png" onclick="removeLigne(this)" alt="-" >

c'est plus simple on ne passe à la fonction que le this, soit l'objet image elle même, pour l'utiliser dans les fonctions de la façon suivante

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function appendLigne(obj) {
  const elemTR = obj.closest("TR");
  const cloneElemTR = elemTR.cloneNode(true);
  const elemInput = cloneElemTR.querySelector("[name='idtable[]']");
  elemInput.setAttribute("value", "newID");
  elemTR.parentNode.append(cloneElemTR);
}
 
function removeLigne(obj) {
  const elemTR = obj.closest("TR");
  elemTR.remove();
}

... exit le passage des parentNode.parentNode, via Element.closest(), trop aléatoire si la structure d'imbrication change.

Une dernière chose la suppression sur la première ligne ne devrait pas être autorisée, mais peut être cela est-il déjà prévu !

[STEF68600]

Merci NoSmoking pour ce complément très enrichissant.

Se servir de MDN , oui dès qu'on sait qu'elle fonction il faut utiliser. C'est un peu ça le problème des débutants.

pour le code, j'ai modifier la partie "delete" pour prendre en compte une ligne existante extraite déjà de la BDD et une nouvelle ligne crée.
Car si j'efface une ligne qui émane au départ de la BDD, ben je peux plus l'effacer dans la BDD...
J'ai donc mis le TR en caché.

pour la gestion de toujours avoir au moins une ligne, oui c'est géré et ça ne me pose pas de problème de ne pas en avoir , car mon formulaire est scinder sur 2 BDD (client, article)
"client" a une clé unique qui réfère sur "article". Donc je peux très bien avoir "client" et pas "article" en référence a ce client.
Si j'enregistre avec zéro ligne dans la BDD , au rafraichissement je relis la BDD sur ce même client et si aucune ligne article, alors j'affiche une ligne vide prête a remplir.

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
    function newLigne(obj) {
      const elemTR = obj.closest("TR");
      const cloneElemTR = elemTR.cloneNode(true);
      const elemInput = cloneElemTR.querySelector("[name='idtable[]']");
      elemInput.setAttribute("value", "x");
      elemTR.parentNode.append(cloneElemTR);
    }
 
    function deleteLigne(obj) {
      const elemTR = obj.closest("TR");
      const elemInput = elemTR.querySelector("[name='idtable[]']");
      if (elemInput.value != "x") {
        elemInput.setAttribute("value", "delete");
        elemTR.style.display = "none";
      } else {
        elemTR.remove();
      }
    }