Modification d'un tr en recupérant son id

**Toufik83** · 26/01/2017, 18h38

Envoyé par 123nada1

moi je veux quand je click sur une ligne d'afficher son contenue dans une choicefield (combobox) pour le modifier

Combobox en html c'est

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<select id="selection">
  <option value='opt1' name='nom_op'>
  </option>
</select>
<!-- ou bien !-->
<datalist id="bieres">
  <option value="Meteor">
  <option value="Pils">
  <option value="Kronenbourg">
  <option value="Grimbergen">
</datalist>

mais comment tu veux que la modification soit effectuée avec une combobox ou datalist?
normalement c'est deux éléments sont des listes de choix, on les sélectionnes, on les modifies pas (si tu vois ce que je veux dire).
si j'été a ta place je mettrai une fenêtre modal, qui s'ouvre au moment du clique sur un TR du tableau, puis y'aura un formulaire dans cette fenêtre qui donne accès à l'utilisateur pour la modification.
mais tout d'abord il faut savoir comment récupérer le texte des td de la ligne sur laquelle on a cliqué, voici un petit exemple qui fait ce traitement :

Code :

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

1
2
3
4
5
6
7
8
9
$("#table_article tr").on("click",function(){//clique sur les tr de la table 
 var text,list=[];// declaration de deux variables text et list (list est un tableau)
 $(this).find("td").each(function(i){// each est une boucle, elle va chercher chaque td de cette ligne 
                                                  //et prendre son texte puis le mettre dans notre tableau list.
 text=$(this).text();// ici on obtient le text
 	list[i]=text; // ici on stock le text dans list
 });
 console.log(list);// tout le text des "td" de notre ligne sont là, tu peux en faire tout ce que tu veux.
});

**123nada1** · 26/01/2017, 18h57

combobox contient tout les articles que j'ai dans la base de donné, alors pour faire modification au niveau du combo il me suffit de selectionné et enregistrer l'article sectionné dans le combo, en fait je veux afficher dans chaque td de la ligne clické une zonne de texte pour effectuer la modification, mon prebléme c'est que les zones de texte et combo sont déja créer dans le fichier form.py du django càd j'ai aucune input dans la template html c'est pour ca j'utilise l'objet formFacture pour accéder au combobox (desciption_article) {{formFacture.description_article}} ce code ça marche bien au niveau html, mais niveau du javascript ne fonctionne pas

**Toufik83** · 26/01/2017, 21h27

positionne toi sur la page ou il y'a la table et appuie sur CTRL+U pour voir le code html généré, et copie nous ce code.

**123nada1** · 27/01/2017, 09h18

Bonjour voici le code générer, il me donne le code htm de la page indexe

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
<!DOCTYPE html>
<html lang="en">
 
<head>
 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
 
    <title>ERP Service comptabilité</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/nvcss.css" rel="stylesheet">
    <link href="/static/css/bootstrap-select.css" rel="stylesheet">
 
    <script src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
    <script src="/static/js/bootstrap-select.js"></script>
 
 
    <script>
        $(document).ready(function(){
            $('#menu-content a').on('click', function(event){
                event.preventDefault();
                $.ajax({
                    url : $(this).data('action'),
                    success : function(data){
                        $('#contenue').html(data);
                        $(".selectpicker").selectpicker();
                    },
                    error : function(){
                        alert("Erreur !!");
                    }
                });
            });
        });
 
    </script>
 
</head>
 
<body>
 
<div class="nav-side-menu">
    <div class="brand">Comptabilité</div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
 
        <div id="main_menu" class="menu-list">
 
            <ul id="menu-content" class="menu-content collapse out">
 
                <li  data-toggle="collapse" data-target="#vente" class="collapsed active">
                    <a href="#"><i class="fa fa-gift fa-lg"></i> Ventes <span class="arrow"></span></a>
                </li>
                <ul class="sub-menu collapse" id="vente">
                    <li><a href="#" data-action="/factures_clients">Factures Clients</a></li>
                    <li><a href="#" data-action="/releves/releveClient">Relevé client</a></li>
                    <li><a href="#" data-action="/paiements/paiementClient">Paiement </a></li>
 
                </ul>
 
                <li  data-toggle="collapse" data-target="#achat" class="collapsed active">
                    <a href="#"><i class="fa fa-gift fa-lg"></i> Achat <span class="arrow"></span></a>
                </li>
                <ul class="sub-menu collapse" id="achat">
                    <li><a href="#" data-action="/factures/factureFournisseur">Factures Fournisseurs</a></li>
                    <li id="releveF"><a href="#" data-action="/releves/releveFournisseur">Relevé Fournisseur</a></li>
                    <li id="PaiementF"><a href="#" data-action="/paiements/paiementFournisseur">Paiement </a></li>
 
                </ul>
            </ul>
        </div>
</div>
 
<div id="contenue" class="nav-side-contenue" style="overflow:auto;">
 
 
</div>
 
 
<!-- /#wrapper -->
 
 
    <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>
 
 
</body>
 
</html>

**123nada1** · 27/01/2017, 10h36

salut l'affichage des zones de texte fonctinne a travers l'objet formFacture on ajoutons le filtre |escapejs : td1.innerHTML = "{{ formFacture.description_article|escapejs }}";
mais les objets sont afficher dans des nouveaux colonnes c'est tout a fait normale parce que j'ai affecter une nouvelle cellule a chaque td, le problème maintenant c'est que je veux afficher chaque zone de texte dans les td que j'ai dans la ligne sélectionné

Code :

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

1
2
3
4
5
6
7
var row = $this.attr('id');
var tr = document.getElementById(row);
var td1 = tr.insertCell(0);
var td2 = tr.insertCell(1);
td1.innerHTML = "{{ formFacture.description_article|escapejs }}";
td2.innerHTML = "{{ formFacture.compte_article|escapejs }}";
td3.innerHTML = "{{ formFacture.quantite_article|escapejs }}";

**123nada1** · 27/01/2017, 12h19

j'ai assayé d'afficher les objets a travers la boucle switch

Code :

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

1
2
3
4
5
6
7
8
9
10
var row = $this.attr('id');
var tr = document.getElementById(row);
var items = tr.getElementsByTagName('td');
var tds = items.length;
switch (tds) {
     case 0:
          tr.innerHTML = "{{ formFacture.description_article|escapejs }}";
     case 1:
          tr.innerHTML = "{{ formFacture.compte_article|escapejs }}";
              }

j'ai assayé aussi items.innerHTML ou j'ai stocké les td au lieu d'utiliser la ligne tr

Code :

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

1
2
3
4
5
6
7
8
9
10
var row = $this.attr('id');
var tr = document.getElementById(row);
var items = tr.getElementsByTagName('td');
var tds = items.length;
switch (tds) {
      case 0:
              items.innerHTML = "{{ formFacture.description_article|escapejs }}";
      case 1:
              items.innerHTML = "{{ formFacture.compte_article|escapejs }}";
            }

mais les boucle ne me retourne rien

**Toufik83** · 27/01/2017, 15h18

tu nous a donné le code html d'une page qui ne contient pas notre tbody id="table_article_tbody", nous devrions savoir comment le html de la table est généré, et pas le code de la page index.
tu dois faire un CTRL+U sur la page qui contient la table, et pas sur une autre page.
on s'intéresse à la page qui contient ce 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
<tbody class="table-article-tbody" id="table_article_tbody">
     {% for ligne in liste_article %}
              <tr id="{{ ligne.ref_article }}">
                    <td>{{ ligne.descripton_article }}</td>
                    <td>{{ ligne.compte_article }}</td>
                    <td>{{ ligne.quantite_article }}</td>
                    <td>{{ ligne.prix_unitaire }}</td>
                    <td>{{ ligne.tva_article }}</td>
                    <td>{{ ligne.montant_article }}</td>
                    <td><a id="update_ligne" href="#" rel="nofollow noopener noreferrer" target="_blank">modifier</a></td>
               </tr>
....
</tbody>

**123nada1** · 27/01/2017, 16h12

on s'intéresse à la page qui contient ce code :

voici le code générer de la page:

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/nvcss.css" rel="stylesheet">
    <link href="/static/css/bootstrap-select.css" rel="stylesheet">
 
    <script src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-3.1.1.min.js"></script>
    <script src="/static/js/bootstrap-select.js"></script>
 
 
<!-----------script chargement de la contenue ligne Facture on changeons la selection du choicefield--------->
<script>
    $(document).ready(function(){
        $('#id_description_article').on('change', function(event){
            event.preventDefault();
            $.ajax({
                type: 'GET',
                url : "/chargement_article",
                data: $("#form_facture").serialize(),
                success : function(data){
 
                    $('#contenue_fact').html(data);
                     $('.selectpicker').selectpicker();
 
 
 
 
                },
                error : function(){
                    alert("Erreur !!");
                }
            });
        });
 
        });
</script>
 
<script>
        $('#table_article tr').on('click', function(event){
            event.preventDefault();
            if($(this).attr('id') != undefined){
                var $this = $(this);
                $.ajax({
                    type: 'GET',
                    url : "/update_ligne_facture_temp",
                    data: $("#form_facture").serialize(),
                    success : function(data){
                        $('#contenue_fact').html(data);
                        var row = $this.attr('id');
                        var tr = document.getElementById(row);
                        var items = tr.getElementsByTagName('td');
                        var tds = items.length;
                        switch (tds) {
                             case 0:
                                items.innerHTML = "\u003Cselect class\u003D\u0022selectpicker\u0022 data\u002Dlive\u002Dsearch\u003D\u0022True\u0022 id\u003D\u0022id_description_article\u0022 name\u003D\u0022description_article\u0022 required\u003E\u000A\u003Coption value\u003D\u0022ref1\u0022\u003Earticle1\u003C/option\u003E\u000A\u003Coption value\u003D\u0022ref2\u0022\u003Earticle2\u003C/option\u003E\u000A\u003Coption value\u003D\u0022ref3\u0022\u003Earticle3\u003C/option\u003E\u000A\u003C/select\u003E";
                             case 1:
                                items.innerHTML = "\u003Cinput class\u003D\u0022form\u002Dcontrol\u0022 id\u003D\u0022id_compte_article\u0022 maxlength\u003D\u002230\u0022 name\u003D\u0022compte_article\u0022 type\u003D\u0022text\u0022 required /\u003E";
                            }
                        $('.selectpicker').selectpicker();
                    },
                    error : function(){
                        alert("Erreur update !!");
                    }
                });
 
 
            }
 
        });
 
 
</script>
<script>
        $('#ajouter_ligne').on('click', function(event){
            event.preventDefault();
            $.ajax({
                type: 'GET',
                url : "/ligne_facture_temp",
                data: $("#form_facture").serialize(),
                success : function(data){
                    $('#contenue_fact').html(data);
                    $('.selectpicker').selectpicker();
 
                },
                error : function(){
                    alert("Erreur LIGNE FACTURE !!");
                }
            });
        });
 
 
</script>
 
 
<div class="container-breadrumb">
    <ol class="breadcrumb breadcrumb-arrow">
        <li><a href="#">Brouillon</a></li>
        <li><a href="#">Ouvert</a></li>
        <li class="active"><span>Payé</span></li>
    </ol>
</div>
 
<div class="container">
 
    <div> </div>
 
    <div class="row">
        <div class="col-lg-12">
            <div class="tableaudebord">
 
                    <form id="form_facture" class="form-horizontal" role="form" method="GET" ACTION="/ligne_facture_temp">
 
                        <div class="row">
                            <div class="col-sm-4" >
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label for="ref" class="label2">R&eacute;f facture   :</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <input class="form-control" id="id_ref_facture" maxlength="30" name="ref_facture" type="text" required />
 
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label for="client" class="label2">Client   :</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <input class="form-control" id="id_client" maxlength="30" name="client" type="text" required />
 
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div class="col-sm-4">
 
                                        <label for="reglement" class="label2">Condition de r&eacute;grlement :</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <select id="id_mode_reglement" name="mode_reglement" required>
<option value="15 jours">15 jours</option>
<option value="30 jours">30 jours</option>
<option value="autre condition reglement">autre condition reglement</option>
</select>
 
                                    </div>
 
                                </div>
                                <div class="form-group" >
                                    <div class="col-sm-4">
                                        <label for="datefacturation" class="label2">Date de facturation :</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <input class="form-control" id="id_date_facturation" name="date_facturation" type="text" value="2017-01-27" required />
 
                                    </div>
 
                                </div>
                            </div>
                             <div class="col-sm-4">
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label for="reglement" class="label2">Date Facture :</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <input class="form-control" id="id_date_facture" name="date_facture" type="text" value="2017-01-27" required />
 
                                    </div>
 
                                </div>
                                <div class="form-group" >
                                    <div class="col-sm-4">
                                        <label for="datefacturation" class="label2">Adresse livraison:</label>
                                    </div>
                                    <div class="col-sm-8">
                                        <input class="form-control" id="id_adresse_livraison" maxlength="30" name="adresse_livraison" type="text" required />
 
                                    </div>
 
                                </div>
                            </div>
                        </div>
                        <!---------------tableau liste articles lier au facture ------>
                        <div class="row">
                            <div class="div-section">
                                <div class="ligne-facture">lignes de facture</div>
                                    <section class="section" id="section_article">
                                        <a id="ajouter_ligne" href="#">Ajouter une ligne</a>
                                            <table id="table_article" cellpadding="0" cellspacing="0" border="0"  >
                                                <thead>
                                                    <tr>
                                                      <th>Description</th>
                                                      <th>Compte</th>
                                                      <th>Quantité</th>
                                                      <th>Prix unitaire</th>
                                                      <th>Taxe</th>
                                                      <th>Montant</th>
                                                      <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody class="table-article-tbody" id="table_article_tbody">
 
                                                        <tr>
                                                          <td><select class="selectpicker" data-live-search="True" id="id_description_article" name="description_article" required>
                                                                   <option value="ref1">article1</option>
                                                                   <option value="ref2">article2</option>
                                                                    <option value="ref3">article3</option>
                                                             </select></td>
                                                          <td><input class="form-control" id="id_compte_article" maxlength="30" name="compte_article" type="text" required /></td>
                                                          <td><input class="form-control" id="id_quantite_article" maxlength="30" name="quantite_article" type="text" required /></td>
                                                          <td><input class="form-control" id="id_prix_unitaire_article" maxlength="30" name="prix_unitaire_article" type="text" required /></td>
                                                          <td><select class="form-control" id="id_tva_article" name="tva_article" required>
                                                                  <option value="7">7</option>
                                                                <option value="20%">20%</option>
                                           <option value="autre tva">autre tva</option>
</select></td>
                                                          <td><input class="form-control" id="id_montant" maxlength="30" name="montant" type="text" required /></td>
                                                          <td></td>
                                                        </tr>
 
                                                </tbody>
                                            </table>
                                    </section>
                                 <!---------------tableau montant total du article au facture ------>
                                    <div class="row div-table-ht" >
                                    <table class="table-ht" cellpadding="0" cellspacing="0" border="0">
 
                                        <tbody>
                                            <tr>
                                                <td colspan="1" class="td_label_ht">
                                                    <label for="o_field_input_13" class="o_form_label">
                                                        Montant HT
                                                    </label>
                                                </td>
                                                <td colspan="1" style="width: 100%;" class="montant-devis">
                                                    <span> د.م. </span></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="1" class="td_label_ht">
                                                    <label for="o_field_input_14" class="o_form_label">
                                                        TVA
                                                    </label>
                                                </td>
                                                <td colspan="1" style="width: 100%;" class="montant-devis">
                                                    <span> د.م. </span></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="1" class="td_label_ht">
                                                    <label for="o_field_input_15" class="o_form_label  oe_subtotal_footer_separator">
                                                        Total
                                                    </label>
                                                </td>
                                                <td colspan="1" style="width: 100%;" class="montant-devis">
                                                    <input class="form-control" id="id_totale" maxlength="30" name="totale" type="text" required /><span> د.م. </span></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="1" class="td_label_ht">
                                                    <label for="o_field_input_17" class="o_form_label o_form_label_help  o_form_invisible" data-original-title="" title="">
                                                        Payé/lettré
                                                    </label>
                                                </td>
                                                <td colspan="1" style="width: 100%;">
                                                    <div class="o_checkbox o_form_field_boolean o_form_field o_form_invisible">
                                                        <input id="o_field_input_17" name="reconciled" disabled="" type="checkbox">
                                                        <span></span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                 </div>
                             </div>
                        </div>
                        <div class="div_bnvalider">
                            <input id="bn-valider" name="bn-valider" type="submit"  value="Valider" class="btn btn-success"  />
                        </div>
                    </form>
            </div>
        </div>
    </div>
</div>

**Toufik83** · 27/01/2017, 17h41

là c'est bon, la partie la plus importante pour nous, c'est la hiérarchie html de notre tbody ===> id="table_article_tbody"

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
<tbody class="table-article-tbody" id="table_article_tbody">
   <tr>
     <td><select class="selectpicker" data-live-search="True" id="id_description_article" name="description_article" required>
                   <option value="ref1">article1</option>
                   <option value="ref2">article2</option>
                   <option value="ref3">article3</option>
             </select>
     </td>
     <td><input class="form-control" id="id_compte_article" maxlength="30" name="compte_article" type="text" required /></td>
     <td><input class="form-control" id="id_quantite_article" maxlength="30" name="quantite_article" type="text" required /></td>
     <td><input class="form-control" id="id_prix_unitaire_article" maxlength="30" name="prix_unitaire_article" type="text" required /></td>
     <td><select class="form-control" id="id_tva_article" name="tva_article" required>
                   <option value="7">7</option>
                   <option value="20%">20%</option>
                   <option value="autre tva">autre tva</option>
            </select>
    </td>
    <td><input class="form-control" id="id_montant" maxlength="30" name="montant" type="text" required />   </td>
    <td></td>
  </tr>
 </tbody>

des remarques :
1- le premier "tr" n'a pas de ID, c'est pour ça que jQuery n'arrive pas a te renvoyer le id du tr cliqué, vu qu'il n'existe même pas! (logique)
2- maintenant tu sais très bien a quoi elle ressemble la table, les attributs des "tr",le contenu des "td" ..., ça deviens plus facile de contrôler les éléments html maintenant.

tu veux qu'en cliquant sur un tr, une zone de texte apparaîtra dans chaque "td" de la ligne, et qu'elle contiendra la valeur de son parent "td", c'est ça?
si c'est oui, je te donne un bout de code en jQuery (le moins possible, tu peux l'améliorer selon tes besoins...)

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
 
$("#table_article_tbody tr").on("click", function(event) {
  //event.stopPropagation();
  var tr = $(this),
    _index, valeur;
  if (tr.find("td .txt_modif").length == 0) { //si l'un ou plusieur de "TD" de ce "TR" ne contient pas la zone de recherche ayant la class "txt_modif"
    tr.find("td").each(function() { //pour chaque td de cette ligne
      _index = $(this).index(); //index du td, le premier=0, deuxième=1, troisième=2...
      if (_index == 0 || _index == 4) { //si c'est le premier td ou le 5eme
        valeur = tr.find("td").eq(_index).find("select option:selected").text();//la valeur vaut l'option selectionné
      } else if (_index == 1 || _index == 2 || _index == 3) {//sinon, si c'est le td 2 ou 3 ou 4
        valeur = tr.find("td").eq(_index).find("input[type=text]").val();//valeur vaut a la zone de texte qui est dans ce td
      }
      $(this).append("<input type='text' class='txt_modif'/>") //ajoute une zone de texte ayant la class '.txt_modif'
        .find(".txt_modif").val(valeur);
    });
  }
 
});

N.B: il y'a un dernier "TD" vide dans le "TR", soit tu l'enlève, soit tu l'ajoute une zone de texte ou un select.. ou autre chose dont t'a besoin.

Modification d'un tr en recupérant son id [AJAX]

jQuery

Discussions similaires

Partager

Partager