Table Dynamique avec Jquery

Version imprimable

4 pièce(s) jointe(s)

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:

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:

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
Pièce jointe 404121

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

16/08/2018, 14h07
psychadelic

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
16/08/2018, 14h48
programmeurz

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

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

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 :plusser: parce que j'y ai passé 1 heure gratuitement :zoubi:

16/08/2018, 17h56
programmeurz

Grand merci :mouarf::mouarf:...Ta logique est assez intéressante...Merci pour ton heure sacrifiée.lol:mrgreen::mrgreen:

suite à ton mail :

Citation:

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:

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:

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.