个人中心
gpt4 book ai didi

javascript - 删除字段时更改总计

转载 作者：行者123 更新时间：2023-12-01 03:11:26 25 4
gpt4 key购买 nike

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

下面是我的演示页面链接

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

屏幕截图:

enter image description here

完整代码:

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

最佳答案

尝试使用:

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

我已将上述点击事件移至您的$(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>

关于javascript - 删除字段时更改总计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45813613/

25 4 0
文章推荐： javascript - 仅在第二次调用函数时 react this.setState 不是一个函数
文章推荐： vba - 获取 Visio 应用程序的窗口位置
文章推荐： tsql - 离岛与缺口问题
文章推荐： python - 按日期对数据框进行分组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com