我使用的是非常有用的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>
如果有人能够提供帮助,我们将非常感激。
非常感谢
克里斯
答案 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结果,请从脚本和输入值中删除“€”符号。