Editer et MAJ dans un tableau

**airdeug** · 06/08/2017, 11h45

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.

**nicdodo** · 06/08/2017, 17h59

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 html :

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

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 html :

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

1
2
 
<input type="button" id="maj" class="ajouter" value="ajouter" onclick="ajouter()">

Cas ou le bouton est en mode modification :

Code html :

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

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 :

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

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

**airdeug** · 06/08/2017, 19h21

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.

**nicdodo** · 06/08/2017, 20h37

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 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
 
<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 :

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

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

**airdeug** · 06/08/2017, 21h24

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 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
<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 :

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
<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.

**NoSmoking** · 07/08/2017, 15h53

Bonjour,
regarde la coloration syntaxique de ces lignes de ton code

Code :

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

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.

Editer et MAJ dans un tableau

JavaScript

Discussions similaires

Partager

Partager