Javascript 关于形状计算的问题
这是较长表单的一小部分(为清晰起见,添加了粉色、绿色和黄色框/箭头):Javascript 关于形状计算的问题,javascript,jquery,Javascript,Jquery,这是较长表单的一小部分(为清晰起见,添加了粉色、绿色和黄色框/箭头): function showAllTotal(){ var sum = 0; $(".depFinalFactor").each(function() { //add only if the value is number if
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);
}
原件:
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);
}
标记:
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);
}
基本上-当数字输入到Quarter->checks(粉色框)中时,值会自动求和并自动填充只读字段“Total Cash”(这已经起作用)。然后,一旦“退款已付”字段输入了值(包括零),它将自动计算“现金总额”并填充“最终总额”字段-每个列都是单独的。这是可行的——但我希望我不必强迫用户在退款中输入值,除非有值。最后-我还需要“存款”和“经理站”列中的“最终总计”,以自动汇总到“存款总计”,这似乎根本不起作用
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);
}
最后,我试图实现一个按钮来重新计算所有的总数,然后他们点击“提交”将其转换成PDF格式,我也被难倒了。它有名称和IDcalc
——但我愿意接受任何关于这方面的最佳实践解决方案。我非常乐意做大量的修改——作为一个新手,很多修改都采用了“我的裤子的座位”编码
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);
}
我对Javascript和JQuery非常陌生-所以请温柔一点?代码如下(无论如何,与此问题相关的部分):
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);
}
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>
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);
}
这是可行的——但我希望我不必强迫用户输入值
在退款中支付,除非有价值
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);
}
这都是你想要的吗?
请尝试下面的代码
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);
}
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/某处修改:向每个事件添加上述函数
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);
}
$(".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()”处的函数替换为以下内容
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);
}
$(".depFinalFactor").keyup(function() {
showAllTotal();
});
我所做的是将汇总总值的函数移动到一个函数中,每次用户开始在表中的一个字段上输入数字时,我都会重用它。所有这些都在代码中,仅此而已
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);
}
编辑:我也在fiddle上更新了你的代码。如果有人想玩,这里有一把小提琴:修复了!你是个救生员!
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);
}