Question

我有带有动态表格的HTML代码。以这种形式，我需要执行算术运算。在第一行中，它从下一行开始可以正常工作，这意味着动态模式对我不起作用。

$(document).ready(function(e) {
  var html = '<div id ="container">															 <input type="text" name="tax_val[]" id="P_tax_val" size="10" placeholder="Val" />															      <select name="tax_per[]" id="P_tax_per" >												<option value="2">2</option>															  <option value="8">8</option>															  <option value="12">12</option>													</select>																										<input type="text" name="cgst_val[]" id="P_cgst_val" size="3" placeholder="cs" />                           <input type="text" name="sgst_val[]" id="P_sgst_val" size="3" placeholder="gs" />															<input type="text" name="total[]" id="P_total"size="5" placeholder="total"/>														  		    <a href="#" id="remove">X</a></div>'

  //Add More values

  $("#add").click(function(e) {
    $("#container").append(html);
  });
  //Remove rows
  $("#container").on('click', '#remove', function(e) {
    $(this).parent('div').remove();
  });
  //calculate CGST and SGST values
  $("#P_tax_per").click(function(e) {
    num1 = $("#P_tax_val").val();
    num2 = $("#P_tax_per").val();
    num3 = (num1 * num2) / 100;
    $("#P_cgst_val").val(num3);
    $("#P_sgst_val").val(num3);
    num4 = parseInt(num1) + parseInt(num3) + parseInt(num3);
    $("#P_total").val(num4);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<form action="ActionServlet" method="post">
  <p class="noscroll">
    <a href="#" id="add">ADD</a>
    <input type="submit" name="SUBMIT" />
  </p>
  <div id="container">
    <input type="text" name="tax_val[]" id="P_tax_val" size="10" placeholder="Val" value="" />
    <select name="tax_per[]" id="P_tax_per" value="">
      <option value="2">2</option>
      <option value="8">8</option>
      <option value="12">12</option>
    </select>
    <input type="text" name="cgst_val[]" id="P_cgst_val" size="3" placeholder="cs" value="" />
    <input type="text" name="sgst_val[]" id="P_sgst_val" size="3" placeholder="gs" value="" />
    <input type="text" name="total[]" id="P_total" size="5" placeholder="total" value="" />
  </div>
  </div>
</form>
</html>

Answer 1

这里有几个问题。首先，当您克隆无效的内容时，您将复制相同的id属性，这将意味着事件仅绑定到这些元素的第一个实例。您需要改用类。

您应该避免在JS逻辑中包含大量HTML。在这种情况下，您可以在添加新组时简单地clone()输入组，将值重新设置为默认值，然后再将其添加到DOM中。

要对动态附加的元素执行计算，您将需要使用委托的事件处理程序。

执行计算时，您需要使用DOM遍历来检索当前组中的输入。在这种情况下，closest()将在您将每组输入包围在其div中后起作用。接下来，出于可访问性原因，应该将change事件与select元素一起使用，而不要与click一起使用。您应该在文本框的input事件以及更改select时执行计算。

最后，您的计算逻辑不正确，因为num3是浮点值，但是您将其解析为整数，这将删除精度并影响结果。您需要从该值中删除parseInt()。

话虽如此，请尝试以下操作：

$(document).ready(function() {
  $("#add").click(function() {
    var $clone = $('#container .group:first').clone();
    $clone.find('input').val('');
    $clone.find('select').val('2');
    $clone.append('<a href="#" class="remove">X</a>');
    $clone.appendTo('#container');
  });

  $("#container").on('click', '.remove', function() {
    $(this).parent('.group').remove();
  });

  $('#container').on('input, change', ".P_tax_per, .P_tax_val", function() {
    var $group = $(this).closest('.group');
    var num1 = parseInt($group.find(".P_tax_val").val(), 10) || 0;
    var num2 = parseInt($group.find(".P_tax_per").val(), 10) || 0;
    var num3 = (num1 * num2) / 100;
    var num4 = num1 + num3 * 2;
    
    $group.find(".P_cgst_val").val(num3);
    $group.find(".P_sgst_val").val(num3);
    $group.find(".P_total").val(num4);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="ActionServlet" method="post">
  <p class="noscroll">
    <a href="#" id="add">ADD</a>
    <input type="submit" name="SUBMIT" />
  </p>
  <div id="container">
    <div class="group">
      <input type="text" name="tax_val[]" class="P_tax_val" size="10" placeholder="Val" value="" />
      <select name="tax_per[]" class="P_tax_per" value="">
        <option value="2">2</option>
        <option value="8">8</option>
        <option value="12">12</option>
      </select>
      <input type="text" name="cgst_val[]" class="P_cgst_val" size="3" placeholder="cs" value="" />
      <input type="text" name="sgst_val[]" class="P_sgst_val" size="3" placeholder="gs" value="" />
      <input type="text" name="total[]" class="P_total" size="5" placeholder="total" value="" />
    </div>
  </div>
</form>

Answer 2

您使用了id，它是唯一的。像我的代码片段一样使用。我使用class并使用closest查找元素。

尝试这样

$(document).ready(function(e) {
  var html = '<div class ="container">															 <input type="text" name="tax_val[]" class="P_tax_val" size="10" placeholder="Val" />															      <select name="tax_per[]" class="P_tax_per" >												<option value="2">2</option>															  <option value="8">8</option>															  <option value="12">12</option>													</select>																										<input type="text" name="cgst_val[]" class="P_cgst_val" size="3" placeholder="cs" />                           <input type="text" name="sgst_val[]" class="P_sgst_val" size="3" placeholder="gs" />															<input type="text" name="total[]" class="P_total"size="5" placeholder="total"/>														  		    <a href="#" id="remove">X</a></div>'

  //Add More values

  $("#add").click(function(e) {
    $("#fullContainer").append(html);
  });
  //Remove rows
  $("#fullContainer").on('click', '#remove', function(e) {
    $(this).parent('div').remove();
  });
  //calculate CGST and SGST values
  $("#fullContainer").on("click", "select.P_tax_per", function(){
    num1 = $(this).closest(".container").find(".P_tax_val").val();
    num2 = $(this).closest(".container").find(".P_tax_per").val();
    num3 = (num1 * num2) / 100;
    var num3 = (num1 * num2) / 100;
    var num4 = parseFloat(num1) + parseFloat(num3 * 2);
    $(this).closest(".container").find(".P_cgst_val").val(num3);
    $(this).closest(".container").find(".P_sgst_val").val(num3);
    $(this).closest(".container").find(".P_total").val(num4);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <form action="ActionServlet" method="post">
    <p class="noscroll">
      <a href="#" id="add">ADD</a>
      <input type="submit" name="SUBMIT" />
    </p>
    <div id="fullContainer">
      <div class="container">
        <input type="text" name="tax_val[]" class="P_tax_val" size="10" placeholder="Val" value="" />
        <select name="tax_per[]" class="P_tax_per" value="">
          <option value="2">2</option>
          <option value="8">8</option>
          <option value="12">12</option>
        </select>
        <input type="text" name="cgst_val[]" class="P_cgst_val" size="3" placeholder="cs" value="" />
        <input type="text" name="sgst_val[]" class="P_sgst_val" size="3" placeholder="gs" value="" />
        <input type="text" name="total[]" class="P_total" size="5" placeholder="total" value="" />
      </div>
    </div>
  </form>
</html>

在Jquery函数中不执行算术运算

2 个答案: