Table Dynamique avec Jquery

**programmeurz** · 16/08/2018, 13h11

Alors bonsoir les gars....J'ai un problème en Jquery .J'ai reussi a faire le calcul pour un premier dans le table mais quand jajoute un autre row le calcul ne seffectue pas..
Voici mon code html

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
<form method="POST" action="">
   <hr><br><br>
   <button type="button" id="valider">Valider</button>
   <button type="button" name="bouton" value="Add Row" class="add-row">Add row</button>
   <button type="button" class="delete-row">Delete Row</button><br><br><hr><br><br>
   <table>
    <thead>
      <tr>
        <th>Select</th>
        <th>Quantité</th>
        <th>Désignation</th>
        <th>Prix Unitaire</th>
        <th>Prix taxé</th>
      </tr>
    </thead>
    <tbody>
     <tr>
      <td><input type="checkbox" name="record" ></td>
      <td><input type="text" name="quantite" placeholder="quantité" id="quantite"></td>
     <td><select type='text' id='designation' name="designation">
            <option>Stylo</option>
            <option>Cahier</option>
            <option>Souris</option>
            <option>Clavier</option>
          </select>
       <td><input type="text" name="prix unitaire" placeholder="prix unitaire" id="prix unitaire"></td>
       <td><span id="pt"></span></td>
     </tr>
   </tbody>
 </table>
</form>

Et voici mode JavaScript//Je suis debutant

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
<script type="text/javascript">
i=1;
$(document).ready(function(){
  //ajoute les lignes
  $(".add-row").click(function(){  
   var qte= document.getElementById('quantite').value;
          var pu= document.getElementById('prix unitaire').value;
          var pt= parseInt(qte) * parseInt(pu);
          document.getElementById('pt').innerHTML = pt;
          //alert(pt);
 
    var markup = "<tr><td><input type='checkbox' name='record' ></td><td><input type='text' name='quantite' placeholder='quantité' id='quantite'></td><td><select type='text' id='designation' name='designation'><option>Stylo</option><option>Cahier</option><option>Souris</option><option>Clavier</option></select><td><input type='text' name='prix unitaire' placeholder='prix unitaire' id='prix unitaire'></td><td><span id='pt'></span></td></tr>";
    $("table tbody").append(markup);
   i++;
  });
 
        // Cherche et enleve les lignes selectionnees
 
        $(".delete-row").click(function(){
          $("table tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
              $(this).parents("tr").remove();
            }
          });
        });
         //Effectuer les calculs
        $("#valider").click(function(){
          var qte= document.getElementById('quantité').value
          var pu= document.getElementById('prix unitaire').value
          var pt= parseInt(qte) * parseInt(pu);
            $("table tbody ").append();
        });
      });      
</script>

aperçu du output :
je reussis a faire le calcul seulement pour le premier row mais sur les autres rows j'y arrive pas quand je les ajoute
Nom : help.PNG
Affichages : 484
Taille : 20,1 Ko

Nom : help.PNG
Affichages : 484
Taille : 20,1 Ko

Merci pour vos aides,mais c'est urgent un peu svp...merci

**psychadelic** · 16/08/2018, 15h07

chaque ligne du tableau créé duplique les ID, ceux ci doivent être uniques.

donner "i" comme nom de variable globale est du suicide.

tes boutons doivent être en dehors de la for pour fonctionner, sinon ils génèrent un submit

**programmeurz** · 16/08/2018, 15h48

En fait le "i" que j'ai mis la cetait pour faire un compteur ...Selon ma maniere de reflechir qui n'a pas été atteinte malheureusement

**psychadelic** · 16/08/2018, 16h45

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
  <hr>
  <button id="valider">Valider</button>
  <button id="add_row">Add row</button>
  <button id="delete_row">Delete Row</button>
  <hr>
  <br>
 
  <form method="POST" action="" id="form_trucs">
    <table>
      <thead>
        <tr>
          <th>Select</th>
          <th>Quantité</th>
          <th>Désignation</th>
          <th>Prix Unitaire</th>
          <th>Prix taxé</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" name="record_1" class="record">
          </td>
          <td>
            <input type="text" placeholder="quantité" name="quantite_1" class="quantite">
          </td>
          <td>
            <select type='text' name='designation_1'>
              <option>Stylo</option>
              <option>Cahier</option>
              <option>Souris</option>
              <option>Clavier</option>
            </select>
            <td>
              <input type="text" placeholder="prix unitaire" name="prix_unitaire_1" class="prix_unitaire">
            </td>
            <td>
              <span id="pt_1" class="prix_taxe"></span>
            </td>
        </tr>
      </tbody>
    </table>
  </form>

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
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
$(document).ready(function () {
 
  var CompteurLigne = 1;
 
  //ajoute les lignes
  $("#add_row").click(function () {
 
    CompteurLigne++;
 
    let markup = '<tr><td><input type="checkbox" name="record_'+CompteurLigne+'" class="record" ></td>';
    markup += '<td><input type="text" placeholder="quantité" name="quantite_'+CompteurLigne+'" class="quantite"></td>';
    markup += '<td><select type="text" name="designation_'+CompteurLigne+'">';    
    markup += '<option>Stylo</option><option>Cahier</option><option>Souris</option><option>Clavier</option></select>';
    markup += '<td><input type="text" placeholder="prix unitaire" name="prix_unitaire_'+CompteurLigne+'" class="prix_unitaire"></td>';
    markup += '<td><span name="pt_'+CompteurLigne+'" class="prix_taxe"></span></td></tr>';
 
    $("form#form_trucs > table > tbody").append(markup);
 
    Calcul_Prix_Taxe();
  });
 
  // Cherche et enleve les lignes selectionnees
 
  $("#delete_row").click(function () {
    $(".record:checkbox:checked").each(function () {
      $(this).parents("tr").remove();
    });
    Calcul_Prix_Taxe();
  });
 
 
  $("#valider").click(function () {
    Calcul_Prix_Taxe();
  });
 
  //Effectuer les calculs
    function Calcul_Prix_Taxe() {
    $("form#form_trucs > table > tbody tr").each(function () {
      let 
        Qte = parseInt( $(this).find(".quantite").val() ) || 0,
        P_U = parseInt( $(this).find(".prix_unitaire").val() ) || 0,
        P_T = (Qte * P_U).toString();
 
      $(this).find(".prix_taxe").html( P_T );
    });
  }
});

On dit merci et on met un

parce que j'y ai passé 1 heure gratuitement

**programmeurz** · 16/08/2018, 18h56

Grand merci

...Ta logique est assez intéressante...Merci pour ton heure sacrifiée.lol

**psychadelic** · 17/08/2018, 20h15

suite à ton mail :

Bonjour Psychadelic stp c’est chaud
la je suis un peu coincé
au niveau du total des prix taxé
j’aimerais que tu m'aides pour avoir le prix total des prix taxé automatiquement lors de l’ajout ou suppression des ''tr''
merci j’attends une suite favorable stp

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
 
  <hr>
  <button id="BT_valider">Valider</button>
  <button id="BT_add_row">Add row</button>
  <button id="BT_delete_row">Delete Row</button>
  <hr>
  <br>
 
  <form method="POST" action="" id="form_trucs">
    <table>
      <thead>
        <tr>
          <th>Select</th>
          <th>Quantité</th>
          <th>Désignation</th>
          <th>Prix Unitaire</th>
          <th>Prix taxé</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" name="record_1" class="record">
          </td>
          <td>
            <input type="text" placeholder="quantité" name="quantite_1" class="quantite">
          </td>
          <td>
            <select type='text' name='designation_1'>
              <option>Stylo</option>
              <option>Cahier</option>
              <option>Souris</option>
              <option>Clavier</option>
            </select>
            <td>
              <input type="text" placeholder="prix unitaire" name="prix_unitaire_1" class="prix_unitaire">
            </td>
            <td>
              <span id="pt_1" class="prix_taxe">0</span>
            </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="3">&nbsp;</th>
          <th>TOTAL Taxés</th>
          <th id="Tot_TX">0</th>
        </tr>
      </tfoot>
    </table>
  </form>

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
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
$(document).ready(function () {
 
  var CompteurLigne = 1;
 
  //ajoute les lignes
  $("#BT_add_row").click(function () {
 
    CompteurLigne++;
 
    let markup = '<tr><td><input type="checkbox" name="record_'+CompteurLigne+'" class="record" ></td>';
    markup += '<td><input type="text" placeholder="quantité" name="quantite_'+CompteurLigne+'" class="quantite"></td>';
    markup += '<td><select type="text" name="designation_'+CompteurLigne+'">';    
    markup += '<option>Stylo</option><option>Cahier</option><option>Souris</option><option>Clavier</option></select>';
    markup += '<td><input type="text" placeholder="prix unitaire" name="prix_unitaire_'+CompteurLigne+'" class="prix_unitaire"></td>';
    markup += '<td><span name="pt_'+CompteurLigne+'" class="prix_taxe">0</span></td></tr>';
 
    $("form#form_trucs > table > tbody").append(markup);
 
    Calcul_Prix_Taxe();
  });
 
  // Cherche et enleve les lignes selectionnees
 
  $("#BT_delete_row").click(function () {
    $(".record:checkbox:checked").each(function () {
      $(this).parents("tr").remove();
    });
    Calcul_Prix_Taxe();
  });
 
 
  $("#BT_valider").click(function () {
    Calcul_Prix_Taxe();
  });
 
  $("form#form_trucs > table > tbody").on("change", ".quantite, .prix_unitaire", function() {
    Calcul_Prix_Taxe();
  });
 
 
 
  //Effectuer les calculs
 
  function Calcul_Prix_Taxe() {
    let Total_Taxes = 0;
 
    $("form#form_trucs > table > tbody tr").each(function () {
      let 
        Qte = parseInt( $(this).find(".quantite").val() ) || 0,
        P_U = parseInt( $(this).find(".prix_unitaire").val() ) || 0,
        P_T = Qte * P_U;
        Total_Taxes += P_T;
 
      $(this).find(".prix_taxe").html( (P_T).toString() );
    });
 
    $("#Tot_TX").html( (Total_Taxes).toString() );
  }
});

mais je te préviens, c'est une exception, je ne traite pas les demandes par mail.

Table Dynamique avec Jquery

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager