自动填充金额

Question

我有这个分割功能，我可以通过点击按钮添加更多的字段。我的问题是，如果我添加一个字段，我无法得到确切的金额，并返回金额，如果我删除该字段。

示例方案：

上述图像显示的初始量-1,000.50。现在这些是我的问题。

在其导致以 Payee: 1 [-950.50]作为受款人的剩余量的第一个字段的量

1. I输入50。当我添加另一个字段时，它会自动填充金额，我期望-950.50，因为这是剩余金额。但我得到的是第二个领域的初始金额-1,000.50。 如何获取更新的剩余金额？

2. 如果我删除添加的字段，我想添加回量。例如。如果该字段有50且余额为-950.50。如果我删除包含数量为50的字段，则必须将其余额添加回剩余金额中，它将为-1,000.50。 如何加回金额？

下面是我曾尝试：

split.html

<table id="dataTable" class="calendar fluid" data-calendar-options='{"maxHeight":70}'" 
    <caption> Payee: 1 
     [<span id="remaining">-1,000.50</span>] 
    </caption> 

    <tbody> 
     <tr> 
      <td class="week-end" id="p_scents"><br/> 
       *Note: Amount totals must equal transaction total and envelopes must be specified to 
         enable the split button.<br/><br/> 

       <p class="button-height"> 
        <span class="input"> 
         <label class="button orange-gradient">Envelope #1</label> 

         <select name="env[]" class="envelope select compact"> 
          <option value="none">(Select)</option> 

          <optgroup label="Category"> 
           <option value="1">Internet</option> 
           <option value="2">Savings</option> 
          </optgroup> 
         </select> 

         <input type="text" name="amt[]" placeholder="0.00" size="10" 
          id="validation-required" class="input-unstyled input-sep validate[required]" 
          onkeyup="calculate(0)"> 

         <input type="text" name="note[]" placeholder="note" class="input-unstyled" id="note"> 
        </span> 

        <span class="with-tooltip"> 
         <img src="{{STATIC_URL}}img/icons/tick.png" title="Default"> 
        </span> 
       </p><br/> 
      </td> 
     </tr> 
    </tbody> 

    <tfoot> 
     <tr> 
      <td> 
       <a href="javascript:{}" id="addScnt" class="button orange-gradient icon-plus-round"> 
        Another Envelope 
       </a> 
      </td> 
     </tr> 
    </tfoot> 
</table> 


<script> 
    function calculate(difference) { 
     var sum = 0; 
     $(":text").each(function() { 
      amt = replaceCommaDollar(this.value); 
      if(!isNaN(amt) && amt.length!=0) { 
       sum += parseFloat(amt); 
       total = sum; 
       difference = -1,000.50 + total         
      } 
     }); 

     $("#remaining").html(numberWithCommas(difference.toFixed(2))); 

     if(difference == 0){ 
      $("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>"); 
     }else{ 
      $("#split").html("<button type='submit' class='button orange-gradient' disabled='disabled'>Split Amount</button>"); 
     } 
    } 

    $(function() { 
     var scntDiv = $('#p_scents'); 
     var i = $('#p_scents p').size() + 1; 
     var remain_amount = Math.abs(replaceCommaDollar($("#remaining").text())).toFixed(2); 

     $('#addScnt').live('click', function() { 
      $('<p class="button-height">'+ 
       ' <span class="input">'+ 
       '  <label class="button orange-gradient">' + 'Envelope #' + i + '</label>' + 
       '  <select name="env[]" class="envelope select compact">'+ 
       '   <option value="none" selected="selected">(Select)</option>' + 
       '   <optgroup label="Category">' + 
       '    <option value="1">Internet</option>' + 
       '    <option value="2">Savings</option>' + 
       '   </optgroup>' + 
       '  </select>' + 
       ' <input type="text" name="amt[]" id="split-amount' + i + '" placeholder="0.00" size="10" class="input-unstyled input-sep" onkeyup="calculate(0)" value="'+ remain_amount +'">'+ 
       ' <input type="text" name="note[]" placeholder="note" class="input-unstyled">'+ 
       ' </span>'+ 
       ' <a href="javascript:{}" id="remScnt" class="with-tooltip">Remove</a></p><br/\>' 
      ).appendTo(scntDiv); 

      $("#remaining").html('0.00'); 
      $("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>"); 

      i++; 
      return false; 
     }); 

     $('#remScnt').live('click', function() { 
      if(i > 2) { 
       test = $('#split-amount'+i).val(); 
       alert(test); 

       $(this).parents('p').remove(); 

       i--; 
      } 

      return false; 
     }); 
    }); 
</script> 

Answer 1

1. 如何获得更新的剩余量？您正在计算remain_amount文档就绪，而不是当您单击添加按钮时。您需要在点击处理程序中将其计算移至#addScnt。只需将它作为该函数的第一行，并且应该相应地重新计算。

2. 如何加回金额？我们可以通过从我们正在移除的输入字段中读取值来完成此操作。这里是修改的删除点击处理程序来演示。这给我的方法来获得被移除的值

   $('#remScnt').live('click', function() { 
       // Might not need the if statement 
       if (i > 2) { 
        //test = $('#split-amount' + i).val(); 
        //alert(test); 
   
        var $p = $(this).parents('p'); 
   
        // Consider this approach to getting the removed value 
        var textValue = $p.find('input[name="amt[]"]').val(); 
        var numValue = replaceCommaDollar(textValue); 
   
        var $remaining = $("#remaining"); 
        var remainingValue = replaceCommaDollar($remaining.text()); 
        var difference = remainingValue - numValue; 
   
        var newRemainingValue = numberWithCommas(difference.toFixed(2))) 
        $("#remaining").text(newRemainingValue); 
   
        $p.remove(); 
   
        // This might not be needed anymore 
        i--; 
       } 
   
       return false; 
   }); 
   

注意，你也许能摆脱涉及i，除非你有其他工作要做逻辑的。考虑根据您要移除的元素搜索DOM。这是可能执行起来较慢，但不是不合理的。这是你的选择，但无论哪种方式都不重要。我认为我的建议更容易维护，如果我要优化，则此页面的其他方面值得更多关注。

我还建议在未来创建一个功能jsFiddle，你的问题将更容易测试和解决一个正常运行的例子。我尝试创建一个，但是我必须更改HTML和JavaScript，因为您提供的源代码中缺少JavaScript函数。

我希望有帮助！随意提出有关我的答案的任何问题，但请不要扩大原始问题的范围。