添加或删除行时，使用jquery在表中自动计算

时间：2018-08-16 11:46:22

标签： javascript jquery

问题是当我在表中添加一行时，它不再计算数字的乘积，而仅看到第一行...我不知道如何解决。也许我需要柜台或如何？请帮助我。

这是我的html代码

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

这是我的javascript代码//我是初次登台的人

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

这是输出的样子 enter image description here

2 个答案:

答案 0 :(得分：1)

我重写了您的html和js。下面只显示add-row处理程序，因为您没有提及其他两个按钮的确切含义。

关于未来的一些注意事项：

  1. 切勿使用重复的ID。 JS无法正确处理它们。
  2. 请勿使用{\ {1}}这样的id \ name \ class。可以将其解析为两个单独的名称，这可能会导致问题。
  3. 选择html元素时不要混合使用纯JS和jQuery。

希望这会有所帮助。

prix unitaire
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;
}

答案 1 :(得分：0)

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

感谢您的回答。我已经想通了一些东西，对不起，我很简短...您了解...所以我将发布我所做的事情

  1. 现在，我希望获得“优惠税”的总计，这意味着在添加或删除行时，总计必须自行更新。

  2. 我想在我的Jquery语句“ let markup ='中添加我的php代码（与我的数据库进行交互），但是我尝试了但没有任何结果 这是我要放入的php代码

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

相关问题
最新问题