0

我有 3 个字段 Quantity、Rate、Total Amount。如果任何一个键入数量或费率字段，则金额将显示在总金额字段上。我还有一个添加按钮。如果有人单击添加按钮，则动态创建新行和删除链接。我的问题是如果我键入数量或比率字段，那么 calculateSum() 函数可以正常工作。假设我创建了 2 行，其总金额为 100+(100+100)=300。如果我删除第一个没有任何改变。如果我删除最后一个，则结果显示 200。但正确的结果是 100。请有人指出我在这里可能做错了什么？非常感谢。这是我的代码：

<html>
    <head>
        <title>Invoice</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
$(document).on("keyup",".qty, .rate",function(){
        calculateSum();
    });

$(document).on("click",".del",function(){
        calculateSum();
    });
      });

function calculateSum() {
    var qty = [];
    $(".qty").each(function() {
            var num = parseFloat(this.value) || 1;
            qty.push(num);
    });

    var rate = [];
    $(".rate").each(function() {
            var num = parseFloat(this.value) || 0;
            rate.push(num);
    });
    var total = 0;
    $('input[name="total_amount[]"]').each(function(i){
        var amount = qty[i].toFixed(2)*rate[i].toFixed(2);
        total += amount;
        $(this).val(amount);
    });
    $("#sub_total").text(total);
}
</script>
<script type="text/javascript" language='javascript'>
/*
This script is identical to the above JavaScript function.
*/
var ct = 1;

function new_link()
{
    ct++;
    var div1 = document.createElement('div');
    div1.id = ct;

    // link to delete extended form elements
    var delLink = '<div  style="text-align:right;margin-top:-20px"><a class="del" href="javascript:delIt('+ ct +')">Delete</a></div>';

    div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;

    document.getElementById('newlink').appendChild(div1);

}
// function to delete the newly added set of elements
function delIt(eleId)
{
    d = document;

    var ele = d.getElementById(eleId);

    var parentEle = d.getElementById('newlink');

    parentEle.removeChild(ele);

}
</script>
        <style type="text/css">
table
{
    border: 1px solid black;
    width: 600px;
}


td
{
    border: 1px solid black;
    padding:5px 5px 5px 5px;
}

        </style>
    </head>
    <body>
        <div id="newlink">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>Quantity</td>
                <td>Rate</td>
                <td>Total Amount</td>
            </tr>

             <tr>
                 <td><input class='qty' type='text' name='qty[]'/></td>
                <td><input class='rate' type='text' name='rate[]'/></td>
               <td><input class='total_amount' type='text' name='total_amount[]'/></td>
            </tr>

                 </table>
    </div>
        <div id="sub_total">0</div>
        <input type="button" value="Add" onclick="new_link()"/>

                <div id="newlinktpl" style="display:none">
        <table cellpadding="0" cellspacing="0">
          <tr>
                 <td><input class='qty' type='text' name='qty[]'/></td>
                <td><input class='rate' type='text' name='rate[]'/></td>
               <td><input class='total_amount' type='text' name='total_amount[]'/></td>
            </tr>
                 </table>
    </div>
    </body>
</html>
4

5 回答 5

2

试试这个：

在.ready()中：

$(document).on("click",".del", function() {
    // Call delIt before calculateSum() and get id from data attribute.
    delIt($(this).data("id")) 

    calculateSum();
});

在new_link()中：

// link to delete extended form elements
var delLink = '<div style="text-align:right;margin-top:-20px"><a class="del" href="#" data-id=' + ct + '>Delete</a></div>';
// Set href = # and set ct to data-id instead.
于 2012-10-11T11:08:44.963 回答
1

我猜你的问题是你在标签的href中有删除的逻辑，但是你将显示更新附加到点击事件中。click 事件通常会在链接被点击之前触发，因此在删除完成之前会更新显示。ct您应该在单击事件（添加到链接数据集）上将这两者合并为一致的不显眼的 JavaScript 。然后你可以有一个事件处理程序来分派给这两个函数，或者让 delete 函数在完成时调用 update 函数。

请注意，即使使用现有代码，上面的最后一句话也应该是一个解决方案，但让事情更接近一致性/预期代码不会受到伤害。

于 2012-10-11T11:24:51.903 回答
0

尝试使用这个

$(".qty, .rate").live("keyup",function(){
    calculateSum();
});
于 2012-10-11T10:53:25.943 回答
0

这是我的 2 美分，我使用 @Mario 和 @MattWhipple 建议重写了 html。我还使用字符串变量删除了文档末尾不需要的额外元素。

我不认为是更好的做事方式，但对我来说更清晰。

<html>
  <head>
    <title>Invoice</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
      var templateText = '<div><table cellpadding="0" cellspacing="0">\
  <tr>\
    <td><input class="qty" type="text" name="qty[]"/></td>\
    <td><input class="rate" type="text" name="rate[]"/></td>\
    <td><input class="total_amount" type="text" name="total_amount[]"/></td>\
  </tr>\
</table></div>';
      var ct = 1;

      $(document).ready(function() {
        $(document).on("keyup", ".qty, .rate", calculateSum);
        $(document).on("click", ".del", delIt);
      });
      function calculateSum() {
        var total = 0;
        $('#newlink table').each(function(i, e) {
          var that = $(this);
          var qty = parseFloat(that.find('.qty').val()) || 1;
          var rate = parseFloat(that.find('.rate').val()) || 0;
          var amount = qty.toFixed(2)*rate.toFixed(2);
          that.find('.total_amount').val(amount);
          total += amount;
        });
        $("#sub_total").text(total);
      }
      function addRow() {
        ct++;
        var div1 = $(templateText);
        div1.attr('id', ct)
        var delLink = $('<div style="text-align:right;margin-top:-20px"> </div>').append($('<a class="del" href="#" >Delete</a>').data("id", ct));
        div1.append(delLink).appendTo('#newlink');
      }
      function delIt() {
        $('#' + $(this).data("id")).remove();
        calculateSum();
      }
    </script>
  </head>
  <body>
    <div id="newlink">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <th>Quantity</th>
          <th>Rate</th>
          <th>Total Amount</th>
        </tr>
        <tr>
          <td><input class='qty' type='text' name='qty[]'/></td>
          <td><input class='rate' type='text' name='rate[]'/></td>
          <td><input class='total_amount' type='text' name='total_amount[]'/></td>
        </tr>
      </table>
    </div>
    <div id="sub_total">0</div>
    <input type="button" value="Add" onclick="addRow()"/>
  </body>
</html>
于 2012-10-11T13:02:39.557 回答
-2

采用.bind( eventType [, eventData], handler(eventObject) )

于 2012-10-11T10:57:25.460 回答