将税计算添加到jQuery计算插件

时间:2012-05-21 22:51:17

标签: jquery html jquery-calculation

我使用的是非常有用的jQuery Calulation插件,

http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

我用它来计算报价表格的行项目总数和子总数。我有它工作,以便它计算单个行项目和小计。我的下一个要求是添加税额,最后是总计。这就是我的jQuery功能已经结束的地方。我尝试了一些事情,但最终却打破了一切。税额是固定的,所以我需要做的是取小计并用它来计算税额,然后将税额加到子总额中以创建总额。

到目前为止,我有这个脚本,

<script type="text/javascript" src="/uploads/JS/jquery.calculation.min.js"></script>

<script type="text/javascript">    
    var bIsFirebugReady = (!!window.console && !!window.console.log);

    $(document).ready(

        function (){            
            // bind the recalc function to the quantity fields   
            $("input[id^=q]").bind("keyup", recalc);    
            $("input[id^=p]").bind("keyup", recalc);    
            // run the calculation function now    
            recalc();

            // automatically update the "#totalSum" field every time    
            // the values are changes via the keyup event
            $("input[name^=sum]").sum("keyup", "#totalSum");

            // this calculates the sum for some text nodes    
            $("#idTotalTextSum").click(

                function (){    
                    // get the sum of the elements    
                    var sum = $(".textSum").sum();

                    // update the total    
                    $("#totalTextSum").text("€" + sum.toString());    
                }    
            );

            // this calculates the average for some text nodes    
            $("#idTotalTextAvg").click(    
                function (){    
                    // get the average of the elements    
                    var avg = $(".textAvg").avg();    

                    // update the total    
                    $("#totalTextAvg").text(avg.toString());    
                }    
            );    
        }    
    );

    function recalc(){    
        $("[id^=total_item]").calc(   
            // the equation to use for the calculation    
            "qty * price",    
            // define the variables used in the equation, these can be a jQuery object

            {    
                qty: $("input[id^=q]"),   
                price: $("input[id^=p]")    
            },

            // define the formatting callback, the results of the calculation are passed to this function    
            function (s){    
                // return the number as a dollar amount    
                return "€" + s.toFixed(2);    
            },    
            // define the finish callback, this runs after the calculation has been complete    
            function ($this){    
                // sum the total of the $("[id^=total_item]") selector    
                var sum = $this.sum();    

                $("#myTotal").val(   
                    // round the results to 2 digits
                    "€" + sum.toFixed(2)    
                );    
            }    
        );    
    }    
</script>

这是HTML的片段,

<tr>    
<td valign="middle" align="center" style="width: 15%;">    
<select class="cms_dropdown" id="t5" name="cntnt01fbrp__914">    
<option value="(none)">(none)</option>
<option value="tasks">Tasks</option>
<option value="resources">Resources</option>
<option value="expenses">Expenses</option>
<option value="other">Other</option>
</select>    
</td>   
<td class="quote_textarea" valign="middle" align="center">    
<textarea cols="80" rows="10" class="cms_textarea" id="d5" name="cntnt01fbrp__915">    
Shower Riser Budget    
</textarea>    
</td>    
<td valign="middle" align="center" style="width: 10%;">   
<input type="text" value="1" size="25" maxlength="80"   id="q5" name="cntnt01fbrp__916">    
</td>    
<td valign="middle" align="center" style="width: 10%;">    
<input type="text" value="€27.00" size="25" maxlength="80"   id="p5" name="cntnt01fbrp__917">    
</td>    
<td valign="middle" align="center" style="width: 10%" id="total_item_5"></td>    
</tr>

<tr>  
<td valign="middle" align="center" style="width: 15%;">   
<select class="cms_dropdown" id="t6" name="cntnt01fbrp__918">    
<option value="(none)">(none)</option>    
<option value="tasks">Tasks</option>    
<option value="resources">Resources</option>    
<option value="expenses">Expenses</option>    
<option value="other">Other</option>   
</select>    
</td>   
<td class="quote_textarea" valign="middle" align="center">    
<textarea cols="80" rows="10" class="cms_textarea" id="d6" name="cntnt01fbrp__919">    
Expenses    
</textarea>   
</td>    
<td valign="middle" align="center" style="width: 10%;">    
<input type="text" value="1" size="25" maxlength="80"   id="q6" name="cntnt01fbrp__920">    
</td>    
<td valign="middle" align="center" style="width: 10%;">    
<input type="text" value="€20.00" size="25" maxlength="80"   id="p6" name="cntnt01fbrp__921">   
</td>    
<td valign="middle" align="center" style="width: 10%" id="total_item_6"></td>  
</tr>

<tr>   
<td colspan="4" align="right">Subtotal </td>    
<td valign="middle" align="center"><input type="text" name="cntnt01fbrp__1104" value="0.00" size="25" maxlength="80" id="myTotal" /></td>    
</tr>             

<tr class="tax">  
<td colspan="4" align="right">Tax (19.6%)</td>        
<td valign="middle" align="center"><input type="text" name="cntnt01fbrp__1105" value="0.00" size="25" maxlength="80" id="tax"/></td>   
</tr>

<tr>    
<td colspan="4" align="right"><b>Total</b></td>    
<td valign="middle" align="center"><input type="text" name="cntnt01fbrp__1106" value="0.00" size="25" maxlength="80" id="total" /></td>    
</tr>

如果有人能够提供帮助,我们将非常感激。

非常感谢

克里斯

1 个答案:

答案 0 :(得分:0)

更改HTML的税务部分:

<tr class="tax">
<td colspan="4" align="right">Tax (19.6%)</td>
<td valign="middle" align="center">
    <input type="hidden" name="cntnt01fbrp__1105" value="19.6" size="25" maxlength="80"
    id="tax" />
    <input type="text" id="taxAmount" name="taxAmount" size="25">
</td>
</tr>

<tr>
<td></td>
<td colspan="3" align="right"><button type="button" onclick="Compute();">Get Total</button>
</td>
<td valign="middle" align="center">
    <input type="text" name="cntnt01fbrp__1106" value="0.00" size="25" maxlength="80"
    id="newTotal" />
</td>
</tr>

并将此函数添加到脚本中:

function Compute() {
        var Total = document.getElementById("myTotal").value;
        var Tax = document.getElementById("tax").value;
        var NewTotal = document.getElementById("newTotal");
        var TaxAmount = document.getElementById("taxAmount");
        Total = parseFloat(Total);
        Tax = parseFloat(Tax);
        TaxAmount.value = Math.max((Total * Tax) / 100).toFixed(2) + ""
        NewTotal.value = Math.max(Total + (Total * Tax) / 100).toFixed(2) + "";
    }

如果您收到NaN结果,请从脚本和输入值中删除“€”符号。