Editer et MAJ dans un tableau

Version imprimable

06/08/2017, 11h45
airdeug

Editer et MAJ dans un tableau

Salut ;
J’utilise une fenêtre modale pour l’ajout, l’édition, la mise à jour(MAJ) et la suppression d’une ligne dans un tableau et je me bloque au niveau de l’édition et la mise à jour dans la fenêtre:
Le bouton Edit est sur chaque ligne ajoutée dans le tableau, je veux que lorsqu'on clique la fenêtre modale s’ouvre et on peut faire la modification et le bouton MAJ prend la place du bouton Enregistrer(qui sert à l'ajout).
Merci de m'aider.

Si je comprends bien ta fenêtre modale est une fenêtre modale que tu as fait toi, ce n'est pas un simple confirm.
Du coup en théorie ton bouton ajout qui doit se modifier en bouton Modifier est un input du type :
Code:

1 2 <input type="button" class="ajouter" value="ajouter">
Du coup, soit tu est parti sur un event avec l'attribut html onclick.

Cas ou le bouton est en mode ajout :
Code:

1 2 <input type="button" id="maj" class="ajouter" value="ajouter" onclick="ajouter()">
Cas ou le bouton est en mode modification :
Code:

1 2 <input type="button" id="maj" class="modifier" value="modifier" onclick="modifier()">
Et dans ce cas là il te suffit de modifier l'attribut l'attribut avec setAttribute :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var maj = document.getElementById("maj") if (maj.className == "modifier"){ maj.setAttribute("class", "ajouter") maj.setAtrbibue("value", "ajouter") maj.setAttribute("onclick", "jouter()") } else { maj.setAttribute("class", "modifier") maj.setAtrbibue("value", "modifier") maj.setAttribute("onclick", "modifier()") }
Je sais pas si c'est ce que tu recherches car ça m'a l'air relativement simple mais sinon renvoi ta demande et ce que tu veux décris étape par étape clairement

06/08/2017, 19h21
airdeug

Salut.
Merci pour votre réponse.
La question est que comment afficher la ligne (de la table <table>) en question dans ma fenêtre modale (que j’ai fait) et comment valider la modification en javascript.

En gros quand tu vas cliquer sur ton bouton edit dans ton tableau tu vas devoir faire appel à une fonction qui appelle ta fenêtre modale et qui récupère le numéro de ta ligne. Comme tu as un bouton par ligne, le plus simple est de relier l’événement à un attribut html onclick.

Exemple de tableau html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <table> <thead> </thead> <tbody> <tr> <td>coucou</td> <td>coucou</td> <td><input type="button" value="éditer" onclick="edit(this.parentElement.parentElement.rowIndex)"></td> </tr> <tr> <td>coucou</td> <td>coucou</td> <td><input type="button" value="éditer" onclick="edit(this.parentElement.parentElement.rowIndex)"></td> </tr> <tr> <td>coucou</td> <td>coucou</td> <td><input type="button" value="éditer" onclick="edit(this.parentElement.parentElement.rowIndex)"></td> </tr> </tbody> </table>
Dans cet exemple ton bouton est dans une cellule qui elle même est dans une ligne, le paramètre de de la fonction edit veut donc dire
"Donne moi l'index de la ligne qui est le parent du parent de l’élément sur lequel je clique". A partir de là tu as ton numéro de ligne.

Le code JS pour récupérer ton numéro de ligne :
Code:

1 2 3 4 function edit(numero){ console.log(numero) }

Salut ;
Je m’explique.
J’ai dans la même page :

une table en html ;
une maquette de saisie modale qui insère (les valeurs de la saisie dans la table et les boutons « Edit » et « supprime ») par l’intermédiaire du bouton « Enregistrer ».

Voila le bout du code :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div class="col-sm-12 form-groupe text-center">
                            <!-- Button trigger modal -->
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-lg" style="margin-bottom: 5px;padding: 0;list-style: none;display: inline">
                                <a href="#" class="btn btn-success">
                                    <i class="fa fa-plus-circle"></i> 
                                    <span class="hidden-xs hidden-sm">Ajout Code</span>
                                </a>
                            </button>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" >
                            <div class="modal-dialog modal-lg" role="document" >
                                <div class="modal-content" style="height:100%;width:100%;margin-left: 17px;background:#e2f6ff; border: double; margin-top: 5px; margin-bottom: 5px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 style="float: contour;" class="modal-title" id="myModalLabel">Saisie détail de la police:</h4>
                                    </div>
                                    <div class="modal-body" style="height:100%;width:96%;margin-left: 17px;background:#e2f6ff; border: double; margin-top: 5px; margin-bottom: 5px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;">
 
                                        <br>
                                        <i style="margin: 5px;font-size: 24px;font: bold;font-style:italic;list-style: none;">Saisie détail de la police:</i>
                                        <br>
                                        <table  class="table rtl_table" >
                                            <thead>
                                                <tr style="background-color: #5D8CAE;">
                                                    <th style="background-color: #5D8CAE;width: 110px;color: #fff;" class="control-label">CODE</th>
                                                    <th style="background-color: #5D8CAE;width: 110px;color: #fff;" class="control-label">DESIGNATIONS</th>
                                                    <th style="background-color: #5D8CAE;width: 110px;color: #fff;" class="control-label">QTITE</th>
                                                    <th style="background-color: #5D8CAE;width: 110px;color: #fff;" class="control-label">UNITE</th>
                                                    <th style="background-color: #5D8CAE;width: 110px;color: #fff;" class="control-label">Observations</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td><input style="text-align: center; border: double; width: 60px; float: center;height:  30px; padding-left: 0;margin:auto;" name="CAD" id="CAD" class="form-control" type="text"  ></td>
                                                    <td><input style="text-align: center; border: double; width: 230px; float: center;height:  30px; padding-left: 0;margin:auto;" name="DESIGNATIONS" id="DESIGNATIONS" class="form-control" type="text"></td>
                                                    <td><input style="text-align: center; border: double; width: 70px; float: center;height:  30px; padding-left: 0;margin:auto;" name="QTITE" id="QTITE" class="form-control" type="text"></td>
                                                    <td><input style="text-align: center; border: double; width: 40px; float: center;height:  30px; padding-left: 0;margin:auto;" name="CU" id="CU" class="form-control" type="text"></td>
                                                    <td><input style="text-align: center; border: double; width: 230px; float: center;height:  30px; padding-left: 0;margin:auto;" name="OBS" id="OBS" class="form-control" type="text"></td>
                                                </tr>
                                            </tbody>
                                        </table>
 
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" id="maj" class="btn btn-primary" onClick="javascript:create_champ()">Enregistrer</button>
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Quit</button>
                                    </div>
                                </div>
                            </div>
                        </div>

L’insertion et la suppression se fait par le javascript toujours sur la même page.
Voila le code :

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
37
38
39
40
41
42
<script type="text/javascript">
<!-- 
        i = 0;
        function create_champ() { 
            i++;
 
            var obj_tableau = document.getElementById("tableau_polices"); 
            var arrayLignes = obj_tableau.rows; 
            var nbr_de_lignes = arrayLignes.length; 
            var nouvelleLigne = obj_tableau.insertRow(nbr_de_lignes - 1); 
            var nbLignes = document.getElementById("tableau_polices").rows.length; 
            var colonne1 = nouvelleLigne.insertCell(0);
            colonne1.innerHTML += nbLignes-2;
            var colonne2 = nouvelleLigne.insertCell(1);
            colonne2.innerHTML +=document.getElementById("CAD").value;
            var colonne3 = nouvelleLigne.insertCell(2);
            colonne3.innerHTML += document.getElementById("DESIGNATIONS").value;
            var colonne4 = nouvelleLigne.insertCell(3);
            colonne4.innerHTML += document.getElementById("QTITE").value;
            var colonne5 = nouvelleLigne.insertCell(4);
            colonne5.innerHTML += document.getElementById("CU").value;
            var colonne6 = nouvelleLigne.insertCell(5);
            colonne6.innerHTML += document.getElementById("OBS").value; 
 
            document.getElementById("CAD").value = "";
            document.getElementById("DESIGNATIONS").value = "";
            document.getElementById("QTITE").value = "";
            document.getElementById("CU").value = "";
            document.getElementById("OBS").value = "";
            var colonne7 = nouvelleLigne.insertCell(6);
            colonne7.innerHTML += '<td><a type="submit" class="btn btn-warning btn-xs"  onclick="">Edit</a></td>
            var colonne8 = nouvelleLigne.insertCell(7);
            colonne8.innerHTML += '<td><a type="submit" class="btn btn-danger btn-xs"  onclick="supprimerLigne(this);">Delete</a></td>';
 
        }
        function supprimerLigne(row)
        {
            var i=row.parentNode.parentNode.rowIndex;
            document.getElementById('tableau_polices').deleteRow(i);
 
}
        }

J’aimerais que :

le clik sur le bouton « Edit » de la ligne me l’affiche dans la fenêtre modale;
le bouton « Enregistrer » soit nommé « MAJ » et met à jour la ligne en question.

J'espère que je suis un peu plus claire et merci pour vous.

07/08/2017, 15h53
NoSmoking
Bonjour,
regarde la coloration syntaxique de ces lignes de ton code
Code:

1 2 colonne7.innerHTML += '<td><a type="submit" class="btn btn-warning btn-xs" onclick="">Edit</a></td> var colonne8 = nouvelleLigne.insertCell(7);
il te manque une simple quote pour fermer ta chaine qui doit entrainer une erreur.