Question

我想在从表中删除特定产品时更新我的总计。每个产品都是动态生成的产品。当我从列表中删除一个产品时，我的总计不会更新。请有人告诉我如何做到这一点。提前谢谢。

以下是我的演示页链接

http://demos.sanwebcorner.com/new1/

截图：

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <title>Add product dynamically with total and grand total</title>
    <script type='text/javascript'>
        //<![CDATA[
        $(window).load(function () {
            var counter = 1;
            $(document).ready(function () {

                //To multiply two textbox values
                $('#qty' + counter).keyup(calculate);
                $(this).keyup(calculate);

                function calculate(e) {
                    $('#total' + e.target.title).val($('#qty' + e.target.title).val() * $('#rates' + e.target.title).val());
                    runtotal()
                }
                function runtotal() {
                    var numbers = $("input[id^='total']").map(function () {
                        return $(this).val();
                    }).get();
                    var total = 0;
                    for (var i = 0; i < numbers.length; i++) {
                        total += numbers[i] << 0;
                    }

                    $("#TotalValue").text(total)
                };

                $("#addButton").click(function () {

                    if (counter > 117) {
                        alert("Only 117 textboxes allow");
                        return false;
                    }

                    var newTextBoxDiv = $(document.createElement('div'))
                        .attr("id", 'TextBoxDiv' + counter);


                    newTextBoxDiv.after().html('' +
                        '<input type="text" size="60" name="product[]"\n\
    id="product' + counter + '" value="" placeholder="Product Name" title = ' + counter + ' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
    ' +
                        '<input type="text" size="2"  placeholder="Qty" title = ' + counter + ' name="qty[]" \n\
    id="qty' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
    ' +
                        '<input type="text"  placeholder="Price" title = ' + counter + ' size="2" name="rates[]"\n\
    id="rates' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
    ' +
                        '<input type="text"  placeholder="Total" title = ' + counter + ' size="3" name="total[]" id="total' + counter + '" value="" onchange="calculate();">' +
                        '\n\ &nbsp; <button class="remove">Remove</button> <br/> '
                    );
                    newTextBoxDiv.appendTo("#TextBoxesGroup");
                    counter++;
                });

                $("#removeButton").click(function () {
                    if (counter == 0) {
                        alert("No more textbox to remove");
                        return false;
                    }

                    counter--;

                    $("#TextBoxDiv" + counter).remove();
                });
            });

        });//]]> 
        //remove div
        $(document).on('click', ".remove", function (e) {
            $(this).parent().remove();
        });
    </script>
    <style>
        [id^="TextBoxDiv"] {
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td><strong>Select the products</strong>
                <input type='button' value='Add Products' id='addButton'>
                <input type='button' value='Remove Products' id='removeButton'>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                <div id='TextBoxesGroup'></div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="hidden" id="countervalue" name="countervalue" style="display:none;">
            </td>
        </tr>
    </table>
    Grand Total : &nbsp; <label id="TotalValue"></label>
</body>
</html>

Answer 1

尝试：

$(document).on('click', ".remove", function(e) {
  $(this).parent().remove();
  runtotal(); // Added this line
});

我已将上述click event移到您的$(document).ready()函数

中

$(window).load(function() {
  var counter = 1;
  $(document).ready(function() {

    //To multiply two textbox values
    $('#qty' + counter).keyup(calculate);
    $(this).keyup(calculate);

    function calculate(e) {
      $('#total' + e.target.title).val($('#qty' + e.target.title).val() * $('#rates' + e.target.title).val());
      runtotal()
    }

    function runtotal() {
      var numbers = $("input[id^='total']").map(function() {
        return $(this).val();
      }).get();
      var total = 0;
      for (var i = 0; i < numbers.length; i++) {
        total += numbers[i] << 0;
      }

      $("#TotalValue").text(total)
    };

    $("#addButton").click(function() {

      if (counter > 117) {
        alert("Only 117 textboxes allow");
        return false;
      }

      var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + counter);


      newTextBoxDiv.after().html('' +
        '<input type="text" size="60" name="product[]"\n\
id="product' + counter + '" value="" placeholder="Product Name" title = ' + counter + ' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
' +
        '<input type="text" size="2"  placeholder="Qty" title = ' + counter + ' name="qty[]" \n\
id="qty' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
' +
        '<input type="text"  placeholder="Price" title = ' + counter + ' size="2" name="rates[]"\n\
id="rates' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
' +
        '<input type="text"  placeholder="Total" title = ' + counter + ' size="3" name="total[]" id="total' + counter + '" value="" onchange="calculate();">' +
        '\n\ &nbsp; <button class="remove">Remove</button> <br/> '
      );
      newTextBoxDiv.appendTo("#TextBoxesGroup");
      counter++;
    });

    $("#removeButton").click(function() {
      if (counter == 0) {
        alert("No more textbox to remove");
        return false;
      }

      counter--;

      $("#TextBoxDiv" + counter).remove();
    });

    $(document).on('click', ".remove", function(e) {
      $(this).parent().remove();
      runtotal();
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  [id^="TextBoxDiv"] {
    margin-bottom: 15px;
  }
</style>
</head>

<body>
  <table>
    <tr>
      <td><strong>Select the products</strong>
        <input type='button' value='Add Products' id='addButton'>
        <input type='button' value='Remove Products' id='removeButton'>
      </td>
    </tr>
  </table>
  <table>
    <tr>
      <td>
        <div id='TextBoxesGroup'></div>
      </td>
    </tr>
    <tr>
      <td>
        <input type="hidden" id="countervalue" name="countervalue" style="display:none;">
      </td>
    </tr>
  </table>
  Grand Total : &nbsp; <label id="TotalValue"></label>

Answer 2

请检查以下输出。

var counter = 1;
$(document).ready(function() {

  //To multiply two textbox values
  $('#qty' + counter).keyup(calculate);
  $(this).keyup(calculate);



  $("#addButton").click(function() {

    if (counter > 117) {
      alert("Only 117 textboxes allow");
      return false;
    }

    var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);


    newTextBoxDiv.after().html('' +
      '<input type="text" size="60" name="product[]"\n\
id="product' + counter + '" value="" placeholder="Product Name" title = ' + counter + ' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
' +
      '<input type="text" size="2"  placeholder="Qty" title = ' + counter + ' name="qty[]" \n\
id="qty' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
' +
      '<input type="text"  placeholder="Price" title = ' + counter + ' size="2" name="rates[]"\n\
id="rates' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
' +
      '<input type="text"  placeholder="Total" title = ' + counter + ' size="3" name="total[]" id="total' + counter + '" value="" onchange="calculate();">' +
      '\n\ &nbsp; <button class="remove">Remove</button> <br/> '
    );
    newTextBoxDiv.appendTo("#TextBoxesGroup");
    counter++;
  });

  $("#removeButton").click(function() {
    if (counter == 0) {
      alert("No more textbox to remove");
      return false;
    }

    counter--;

    $("#TextBoxDiv" + counter).remove();
    runtotal();
  });
});
//remove div
$(document).on('click', ".remove", function(e) {
  $(this).parent().remove();
  runtotal();
});


function calculate(e) {
  $('#total' + e.target.title).val($('#qty' + e.target.title).val() * $('#rates' + e.target.title).val());
  runtotal()
}

function runtotal() {
  var numbers = $("input[id^='total']").map(function() {
    return $(this).val();
  }).get();
  var total = 0;
  for (var i = 0; i < numbers.length; i++) {
    total += numbers[i] << 0;
  }

  $("#TotalValue").text(total)
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><strong>Select the products</strong>
      <input type='button' value='Add Products' id='addButton'>
      <input type='button' value='Remove Products' id='removeButton'>
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <div id='TextBoxesGroup'></div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="hidden" id="countervalue" name="countervalue" style="display:none;">
    </td>
  </tr>
</table>
Grand Total : &nbsp;
<label id="TotalValue"></label>

这适用于您的两个删除按钮

删除字段时更改总计

2 个答案: