自动填充金额

Question

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

示例场景:

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

1. 我输入50第一个字段的数量,Payee: 1 [-950.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 函数。

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