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

Ekane 3

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

Ekane 3

 <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>";
?>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Adding or deleting table rows with MySQL, jQuery and Ajax

From Dev

Adding rows to table using jquery

From Dev

Adding rows to table using jquery

From Dev

How to auto calculate table rows using jquery?

From Dev

How to calculate automatically using jQuery base on PHP rows?

From Dev

Adding/Deleting table rows based on Select value

From Dev

adding <tr> to table using jquery + keep jquery function on added rows

From Dev

How to refresh a simple Datatables table when adding new rows with jQuery

From Dev

Rows disappearing when adding them dynamically to table with JS/jQuery

From Dev

Adding, editing, deleting rows of the grid using Struts2 jQuery Grid plugin

From Dev

Deleting Row in table using jQuery

From Dev

automatically calculate total value using jQuery

From Dev

Adding new rows to table on clicking button in JQuery

From Dev

jQuery, adding multiple table rows is not working correctly

From Dev

Adding table rows and column dynamically with jQuery

From Dev

Deleting rows in HTML table

From Dev

Adding automatically rows of an array

From Dev

Adding to a table using MVC 5, and reset Id after deleting records

From Dev

Dynamically adding rows to an html table, using Javascript

From Dev

Adding rows to an html table using JS

From Dev

Appending rows into table using JQuery

From Dev

Deleting Rows Using Find

From Dev

deleting multiple rows using check boxes with jquery in django?

From Dev

Adding values to a table automatically

From Dev

Copy table rows in multiple table using JQUERY

From Dev

Adding and deleting rows in dynamic table in Asp.net mvc razor view

From Dev

Adding Jquery Confirm For Deleting Record

From Dev

Deleting multiple rows from a table

From Dev

Dynamically added table rows not deleting

Related Related

  1. 1

    Adding or deleting table rows with MySQL, jQuery and Ajax

  2. 2

    Adding rows to table using jquery

  3. 3

    Adding rows to table using jquery

  4. 4

    How to auto calculate table rows using jquery?

  5. 5

    How to calculate automatically using jQuery base on PHP rows?

  6. 6

    Adding/Deleting table rows based on Select value

  7. 7

    adding <tr> to table using jquery + keep jquery function on added rows

  8. 8

    How to refresh a simple Datatables table when adding new rows with jQuery

  9. 9

    Rows disappearing when adding them dynamically to table with JS/jQuery

  10. 10

    Adding, editing, deleting rows of the grid using Struts2 jQuery Grid plugin

  11. 11

    Deleting Row in table using jQuery

  12. 12

    automatically calculate total value using jQuery

  13. 13

    Adding new rows to table on clicking button in JQuery

  14. 14

    jQuery, adding multiple table rows is not working correctly

  15. 15

    Adding table rows and column dynamically with jQuery

  16. 16

    Deleting rows in HTML table

  17. 17

    Adding automatically rows of an array

  18. 18

    Adding to a table using MVC 5, and reset Id after deleting records

  19. 19

    Dynamically adding rows to an html table, using Javascript

  20. 20

    Adding rows to an html table using JS

  21. 21

    Appending rows into table using JQuery

  22. 22

    Deleting Rows Using Find

  23. 23

    deleting multiple rows using check boxes with jquery in django?

  24. 24

    Adding values to a table automatically

  25. 25

    Copy table rows in multiple table using JQUERY

  26. 26

    Adding and deleting rows in dynamic table in Asp.net mvc razor view

  27. 27

    Adding Jquery Confirm For Deleting Record

  28. 28

    Deleting multiple rows from a table

  29. 29

    Dynamically added table rows not deleting

HotTag

Archive