CODEWITHSUNDEEP
javascriptjquery
Ekane 3
Ekane 3

Reputation: 348

Calculate automatically in a table using jquery when adding or deleting rows

The problem is when I add a row in the table it doesn't calculate the product of the numbers anymore whereas it sees only the first row...I don't know how to solve it. Maybe I need a counter or how? Please I need help guys.

This is my html code

<style type="text/css">
form{
  margin: 20px 0;
  text-align:center;
}
.add-row{
  background-color: #76a6f2;
}
.delete-row{
  background-color: #f45a6f;
}
form input, button{
  padding: 5px;
}
table{
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
table, th, td{
  border: 1px solid #cdcdcd;
  border-collapse: collapse;
}
table th, table td{
  padding: 5px;
  text-align: center;
}
#valider,button{
  width:10%;
  border-radius: 10px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

This is my javascript code //I am a debutant please

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
   var 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();
            }
          });
          i--;
        });
         //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>

This is what the output looks like enter image description here

Upvotes: 0

Views: 154

Answers (2)

Ekane 3
Ekane 3

Reputation: 348

 <script type="text/javascript">
  $(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><td><input type="text" placeholder="quantité" name="quantite_'+CompteurLigne+'" class="quantite"></td><td><select type="text" name="designation_'+CompteurLigne+'"><option>Stylo</option><option>Cahier</option><option>Souris</option><option>Clavier</option></select><td><input type="text" placeholder="prix unitaire" name="prix_unitaire_'+CompteurLigne+'" class="prix_unitaire"></td><td><span name="pt_'+CompteurLigne+'" class="prix_taxe"></span></td></tr>';
 
 $("form 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() {
    $("tbody tr").each(function () {
      var 
      Qte = parseFloat( $(this).find(".quantite").val() ) || 0,
      P_U = parseFloat( $(this).find(".prix_unitaire").val() ) || 0 ,
      P_T = (Qte * P_U).toString(),
      total+= P_T;
      
      $(this).find(".prix_taxe").html( P_T );
    });
    $(".total")
  }

});
</script>
 <style type="text/css">
  form{
    margin: 20px 0;
    text-align:center;
  }
  #add_row{
    background-color: #76a6f2;
  }
  #delete_row{
    background-color: #f45a6f;
  }
  form input, button{
    padding: 5px;
  }
  table{
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
  }
  table, th, td{
    border: 1px solid #cdcdcd;
    border-collapse: collapse;
  }
  table th, table td{
    padding: 5px;
    text-align: center;
  }
  button{
    text-align:center;
    width:10%;
    border-radius: 10px;
  }
  #tot{
    text-align: right;
  }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 name="pt_1" class="prix_taxe"></span>
          </td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
      <b>Total Pt :<span name="total" class="total">0</span></b>
    </table>
    
  </form>

Thanks for your answer. i figured out something already and sorry i was brief...You understand...So i will post what i did

  1. Now i will like to have the grand total of the "prix taxe" that means the grand total has to self update when you add or delete row.

  2. I want to add my php code(interacting with my database) inside my Jquery statement "let markup = ' but i tried but nothing came out good This is the php code i'm trying to fit in

 <?php echo "<select name='BX_DESIGNATION[]' size='1' class='DESCRIPTION' id='desig'>";
 $sql= mysql_query(" SELECT * FROM tab_stock WHERE stock_dispo > stock_rupture ORDER BY code_medic ASC ") or die( mysql_error() );
 echo "<option value='choisir' selected>Choisir</option>";
 WHILE($rows = mysql_fetch_array($sql)) {
  $designation=$rows['designation'];
  $stock=$rows['stock_dispo'];
  $stock_alerte=$rows['stock_alerte'];

  $punic= mysql_query(" SELECT pu FROM tab_stock WHERE designation ='$designation' ") or die( mysql_error() );
  $extrat= mysql_fetch_array($punic);
  $pu = $extrat['pu'];

  if($stock <= $stock_alerte){echo "<option label='".$pu."' value='".$designation."' style='color:red'>".$designation." &#10060; ".$stock."</option>";} else
  {echo "<option label='".$pu."' value='".$designation."'>".$designation."</option>";}     
}
echo "</select>";
?>

Upvotes: 0

Alex Yokisama
Alex Yokisama

Reputation: 1041

I rewrote your html and js. Only add-row handler is present below, because you didn't mention, what exactly do you expect from other two buttons.

Some notes for future:

  1. Never use duplicate id's. JS can not process them properly.
  2. Don't use id\name\class like prix unitaire. This is resolvaed as two separate names, which can cause problems.
  3. Don't mix pure JS and jQuery when selecting html elements.

Hope this helps.

var i=1;
$(document).ready(function() {
  //ajoute les lignes 
  
  $(".add-row").click(function(){  
    $("tbody tr").each(function(k, v) {
      var qte= $(v).find('.quantite').val();
      var pu= $(v).find('.prix-unitaire').val();
      var pt= parseInt(qte) * parseInt(pu);
      $(v).find('.pt').html(pt);
    });

    var markup = "<tr><td><input type='checkbox' name='record'></td><td><input type='text' name='quantite' placeholder='quantité' class='quantite'></td><td><select type='text' class='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' class='prix-unitaire'></td><td><span class='pt'></span></td></tr>";
    $("table tbody").append(markup);
    i++;
  });
});     
form{
  margin: 20px 0;
  text-align:center;
}
.add-row{
  background-color: #76a6f2;
}
.delete-row{
  background-color: #f45a6f;
}
form input, button{
  padding: 5px;
}
table{
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
table, th, td{
  border: 1px solid #cdcdcd;
  border-collapse: collapse;
}
table th, table td{
  padding: 5px;
  text-align: center;
}
#valider,button{
  width:10%;
  border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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é" class="quantite"></td>
     <td><select type='text' class='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" class="prix-unitaire"></td>
       <td><span class="pt"></span></td>
     </tr>
   </tbody>
 </table>
</form>

Upvotes: 1

Related Questions