javascript - 表格计算的问题

标签 javascript jquery

这是更长形式的一小部分(为清楚起见，添加了粉红色、绿色和黄色框/箭头):

原文: enter image description here

标记: enter image description here

基本上 - 当数字输入季度 -> 支票(粉红色框)时，值自动求和并自动填充只读字段“总现金”(这已经在工作)。然后，一旦“退款支付”字段输入了一个值(包括零)，它会自动与“总现金”相加并填充“最终总计”字段 - 每列都是单独的。这行得通 - 但我希望我不必强制用户在 Refunds Paid in 中输入一个值，除非有一个值。最后 - 我还需要“存款”和“经理站”列中的“最终总计”到自动求和到“存款总额”这似乎根本不起作用......

最后 - 我尝试实现一个按钮来重新计算所有总计，然后他们单击“提交”将其转换为 PDF - 我也被难住了。具有名称和 ID calc - 我愿意接受任何关于这方面的最佳实践解决方案。我非常乐意进行大量修改 - 作为新手，其中很多都采用“我的裤子”编码。

我对 Javascript 和 JQuery 还很陌生 - 所以请多关照？下面的代码(无论如何与这个问题相关的部分):

HTML 

<tr>
    <td class="label" colspan="4">Deposit / Safe / Manager Station Count</td>
</tr>
<tr>
    <td class="null"></td>
    <td class="label">Deposit</td>
    <td class="label">Manager Station</td>
    <td class="label">Safe</td>
</tr>
<tr>
    <td class="label">Quarters</td>
    <td class="field"><input type="text" name="depQuarters" class="dep" tabindex="31" /></td>
    <td class="field"><input type="text" name="manQuarters" class="man" tabindex="41" /></td>
    <td class="field"><input type="text" name="safeQuarters" class="safe" tabindex="51" /></td>
</tr>
<tr>
    <td class="label">Coins</td>
    <td class="field"><input type="text" name="depCoins" class="dep" tabindex="32" /></td>
    <td class="field"><input type="text" name="manCoins" class="man" tabindex="42" /></td>
    <td class="field"><input type="text" name="safeCoins" class="safe" tabindex="52" /></td>
</tr>
<tr>
    <td class="label">$1 Bills</td>
    <td class="field"><input type="text" name="dep1Bills" class="dep" tabindex="33" /></td>
    <td class="field"><input type="text" name="man1Bills" class="man" tabindex="43" /></td>
    <td class="field"><input type="text" name="safe1Bills" class="safe" tabindex="53" /></td>
</tr>
<tr>
    <td class="label">$5 Bills</td>
    <td class="field"><input type="text" name="dep5Bills" class="dep" tabindex="34" /></td>
    <td class="field"><input type="text" name="man5Bills" class="man" tabindex="44" /></td>
    <td class="field"><input type="text" name="safe5Bills" class="safe" tabindex="54" /></td>
</tr>
<tr>
    <td class="label">$10 Bills</td>
    <td class="field"><input type="text" name="dep10Bills" class="dep" tabindex="35" /></td>
    <td class="field"><input type="text" name="man10Bills" class="man" tabindex="45" /></td>
    <td class="field"><input type="text" name="safe10Bills" class="safe" tabindex="55" /></td>
</tr>
<tr>
    <td class="label">$20 Bills</td>
    <td class="field"><input type="text" name="dep20Bills" class="dep" tabindex="36" /></td>
    <td class="field"><input type="text" name="man20Bills" class="man" tabindex="46" /></td>
    <td class="field"><input type="text" name="safe20Bills" class="safe" tabindex="56" /></td>
</tr>
<tr>
    <td class="label">$50 Bills</td>
    <td class="field"><input type="text" name="dep50Bills" class="dep" tabindex="37" /></td>
    <td class="field"><input type="text" name="man50Bills" class="man" tabindex="47" /></td>
    <td class="field"><input type="text" name="safe50Bills" class="safe" tabindex="57" /></td>
</tr>
<tr>
    <td class="label">$100 Bills</td>
    <td class="field"><input type="text" name="dep100Bills" class="dep" tabindex="38" /></td>
    <td class="field"><input type="text" name="man100Bills" class="man" tabindex="48" /></td>
    <td class="field"><input type="text" name="safe100Bills" class="safe" tabindex="58" /></td>
</tr>
<tr>
    <td class="label">Checks</td>
    <td class="field"><input type="text" name="depChecks" class="dep" tabindex="39" /></td>
    <td class="field"><input type="text" name="manChecks" class="man" tabindex="49" /></td>
    <td class="field"><input type="text" name="safeChecks" class="safe" tabindex="59" /></td>
</tr>
<tr>
    <td class="label">Total Cash</td>
    <td class="field"><input type="text" name="depTotal" id="depTotal" class="depFinalFactor" readonly /></td>
    <td class="field"><input type="text" id="manTotal" name="manTotal" class="manFinalFactor" readonly /></td>
    <td class="field"><input type="text" id="safeTotal" name="safeTotal" class="safeFinalFactor" readonly /></td>
</tr>
<tr>
    <td class="label">Refunds Paid In</td>
    <td class="field"><input type="text" name="depRefunds" id="depRef" class="depFinalFactor" tabindex="40" /></td>
    <td class="field"><input type="text" name="manRefunds" tabindex="50" class="manFinalFactor" /></td>
    <td class="field"><input type="text" name="safeRefunds" tabindex="60" class="safeFinalFactor" /></td>
</tr>
<tr>
    <td class="label">Final Total</td>
    <td class="field"><input type="text" name="depFinalTotal" id="depFinalTotal" readonly /></td>
    <td class="field"><input type="text" name="manFinalTotal" id="manFinalTotal" readonly /></td>
    <td class="field"><input type="text" name="safeFinalTotal" id="safeFinalTotal" readonly /></td>
</tr>
<tr>
    <td class="null" colspan="2"></td>
    <td class="label">Total to Deposit</td>
    <td class="field" id="totalToDeposit"></td>
</tr>
</table>
<input type="button" name="calc" id="calc" value="Recalculate Totals" />
<input style="float: right;" type="submit" name="btn_submit" />
</form>
</body>
</html>

Javascript/JQuery

$(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event

    $(".accXPT1").each(function() {
        $(this).keyup(function(){
            calculateSumForInput(".accXPT1", "#accXPT1Total");
        });
    });
    $(".accXPT2").each(function() {
        $(this).keyup(function(){
            calculateSumForInput(".accXPT2", "#accXPT2Total");
        });
    });
    $(".accXPT3").each(function() {
        $(this).keyup(function(){
            calculateSumForInput(".accXPT3", "#accXPT3Total");
        });
    });


    $(".dispXPT1").each(function() {
        $(this).keyup(function(){
            calculateSumForInput(".dispXPT1", "#dispXPT1Total");
        });
    });
    $(".dispXPT2").each(function() {
        $(this).keyup(function(){
            calculateSumForInput(".dispXPT2", "#dispXPT2Total");
        });
    });
    $(".dispXPT3").each(function() {
        $(this).keyup(function(){
            calculateSumForInput(".dispXPT3", "#dispXPT3Total");
        });
    });


    $(".dep").each(function() {
        $(this).keyup(function(){
            calculateSumForInput(".dep", "#depTotal");
        });         
    });
    $(".man").each(function() {
        $(this).keyup(function(){
            calculateSumForInput(".man", "#manTotal");
        });
    });
    $(".safe").each(function() {
        $(this).keyup(function(){
            calculateSumForInput(".safe", "#safeTotal");
        });
    });


    $(".depFinalFactor").keyup(function() {
        var sum = 0;

        $(".depFinalFactor").each(function() {
        //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });     


        mySum = sum.toFixed(2);

        if (mySum == $("#moneyAccountedFor").val()) {
            $("#totalToDeposit").css("color", "green");
        } else {
            $("#totalToDeposit").css("color", "red");
        }

        $("#depFinalTotal").val(mySum);
        $("#totalToDeposit").text(mySum);
    });

    $("#calc").on("click", function() {
        var sum = 0;

        $(".depFinalFactor").each(function() {
        //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });     


        mySum = sum.toFixed(2);

        if (mySum == $("#moneyAccountedFor").val()) {
            $("#totalToDeposit").css("color", "green");
        } else {
            $("#totalToDeposit").css("color", "red");
        }

        $("#depFinalTotal").val(mySum);
        $("#totalToDeposit").text(mySum);
    });

    $(".manFinalFactor").keyup(function() {
        var sum = 0;

        $(".manFinalFactor").each(function() {
        //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });     


        mySum = sum.toFixed(2);
        $("#manFinalTotal").val(mySum);
    });

    $(".safeFinalFactor").keyup(function() {
        var sum = 0;

        $(".safeFinalFactor").each(function() {
        //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });     


        mySum = sum.toFixed(2);
        $("#safeFinalTotal").val(mySum);
    });

});

function calculateSum(myClass, myID) {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(myClass).each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }


    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    myTotal = sum.toFixed(2);
    $(myID).text(myTotal);
}

function calculateSumForInput(myClass, myID) {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(myClass).each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }


    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    myTotal = sum.toFixed(2);
    $(myID).val(myTotal);
}

最佳答案

That works - but I wish I didn't have to force users to enter a value in Refunds Paid in unless there IS a value.

这都是你想要的吗？ 试试下面的代码

1/添加这个函数

                function showAllTotal(){
                    var sum = 0;

                    $(".depFinalFactor").each(function() {
                    //add only if the value is number
                        if(!isNaN(this.value) && this.value.length!=0) {
                            sum += parseFloat(this.value);
                        }
                    });     


                    mySum = sum.toFixed(2);

                    if (mySum == $("#moneyAccountedFor").val()) {
                        $("#totalToDeposit").css("color", "green");
                    } else {
                        $("#totalToDeposit").css("color", "red");
                    }

                    $("#depFinalTotal").val(mySum);
                    $("#totalToDeposit").text(mySum);
                }

2/修改某处:为每个事件添加上面的函数

            $(".dep").each(function() {
                    $(this).keyup(function(){
                        calculateSumForInput(".dep", "#depTotal");
                        showAllTotal();
                    });         
                });
                $(".man").each(function() {
                    $(this).keyup(function(){
                        calculateSumForInput(".man", "#manTotal");
                        showAllTotal();
                    });
                });
                $(".safe").each(function() {
                    $(this).keyup(function(){
                        calculateSumForInput(".safe", "#safeTotal");
                        showAllTotal();
                    });
                });

3/将 "$(".depFinalFactor").keyup(function()"处的函数替换为以下内容

            $(".depFinalFactor").keyup(function() {
                    showAllTotal();
            });

我所做的是将汇总总值的函数移动到一个函数中，每次用户开始在表中的一个字段上输入数字时，我都会重复使用它。全部在您的代码中，仅此而已!

已编辑:我也在 fiddle 上更新了您的代码。

关于javascript - 表格计算的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15953256/

上一篇：javascript - 如果 font-face 无论如何都必须调用多个文件，它是否值得？

下一篇：javascript - 使用 jQuery .one 的逻辑

相关文章：

jquery - 从 jquery 安全地调用我的 Web api

javascript - jQuery文件上传和ajax

javascript - 在 React Native 中传递来自两个类的数据

javascript - 如何使用 php time() 作为基准时间在 javascript 中显示世界时间？

javascript - AJAX json 意外标记'

javascript - Angular 2 服务出错后未调用更改方法

javascript - CSS translateY 正在扩展文档长度

javascript - PHP Ajax 自动完成多个字段

javascript - window.scroll 不是即时动画

javascript - 按 HTML 数据属性对数组进行排序？

©2024 IT工具网  联系我们